Checkboxes

TreeView consists of in-build checkbox option and it can be displayed to the left of the tree node by setting the showCheckbox property as true. It allows you to select more than one node at a time.

Indeterminate Checkboxes

TreeView supports tristate checkboxes in addition with standard two state checkboxes. By default TreeView has been enabled with tristate in checkboxes. You can enable 2-state checkboxes by using autoCheckParentNode as false.

  • html
  • <!--create the TreeView wrapper-->
    
        <div id="treeView"> </div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
     
    
    module TreeViewComponent {
        $(function () {
            var tree = new ej.TreeView($("#treeView"), {
    
                    showCheckbox: true, // shows each node with checkboxes
    
                    autoCheckParentNode: false,// enable 2-state checkboxes
    
                    fields: {
                        dataSource: [
    
                        {
    
                            text: "Item 1",
    
                            child: [
    
                            { text: "Item 1.1" },
    
                            { text: "Item 1.2" }
    
                            ]
    
                        },
    
                        { text: "Item 2" },
    
                        { text: "Item 3" }
    
                        ]
    
                    }
    
                });
    
            });
    }

    Auto Checkable

    By default checkbox state of child nodes depends up on parent node checkbox state and also parent node state gets updated based on child nodes state. You can turn off this option by setting autoCheck as false to make independent parent and child nodes checkboxes.

  • html
  • <!--create the TreeView wrapper-->
    
        <div id="treeView"> </div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module TreeViewComponent {
        $(function () {
            var tree = new ej.TreeView($("#treeView"), {
    
                    showCheckbox: true, // shows each node with checkboxes
    
                    autoCheck: false,// turns off auto check of parent and child nodes
    
                    fields: {
                        dataSource: [
    
                        {
    
                            text: "Item 1",
    
                            child: [
    
                            { text: "Item 1.1" },
    
                            { text: "Item 1.2" }
    
                            ]
    
                        },
    
                        { text: "Item 2" },
    
                        { text: "Item 3" }
    
                        ]
    
                    }
    
                });
    
            });
        }

    Check or Uncheck Node

    Tree node can be checked or unchecked using checkNode and uncheckNode methods while showCheckbox property is enabled in TreeView. Also you can get or set the checked nodes of TreeView using checkedNodes property, which indicates the checked nodes index collection as array. The nodeCheck and nodeUncheck event occurs based on checkbox state.
    You can use isNodeChecked method to check the particular TreeView node is checked or unchecked. Also you can use checkAll method to check all the nodes in TreeView.

  • js
  • //to check node
    
            tree.checkNode("2");
    
            //to uncheck node
    
            tree.uncheckNode("2");

    Get Checked Nodes

    To get checked nodes of TreeView, you can use getCheckedNodes method. It returns the collection of tree node.
    Also you can get currently checked nodes indexes in TreeView by using getCheckedNodesIndex method.

  • html
  • <!--create the TreeView wrapper-->
    
        <div id="treeView"> </div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module TreeViewComponent {
        $(function () {
            var tree = new ej.TreeView($("#treeView"), {
    
                    showCheckbox: true, // shows each node with checkboxes
    
                    autoCheck: false,// turns off auto check of parent and child nodes
    
                    fields: {
                        dataSource: [
    
                        {
    
                            text: "Item 1",
    
                            child: [
    
                            { text: "Item 1.1" },
    
                            { text: "Item 1.2" }
    
                            ]
    
                        },
    
                        { text: "Item 2" },
    
                        { text: "Item 3" }
    
                        ]
    
                    }
    
                });
    
            });
     }
    
            function onClick() {
    
                //to get checked nodes
    
                tree.getCheckedNodes();
    
            }