Checkboxes in ASP.NET TreeView Control

12 Apr 20244 minutes to read

TreeView consists of built-in 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

<%--initialize and bind the TreeView with local data--%>
        <%--shows each node with checkboxes--%>
        <%--enable 2-state checkboxes--%>
    
        <ej:TreeView
            ID="treeView"
            runat="server"
            DataTextField="Text"
            DataIdField="Id"
            DataParentIdField="Parent"
            DataExpandedField="Expanded"
            ShowCheckbox="true"
            AutoCheckParentNode="false">
        </ej:TreeView>

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

<%--initialize and bind the TreeView with local data--%>
        <%--shows each node with checkboxes--%>
        <%--turns off auto check of parent and child nodes--%>
    
        <ej:TreeView
            ID="treeView"
            runat="server"
            DataTextField="Text"
            DataIdField="Id"
            DataParentIdField="Parent"
            DataExpandedField="Expanded"
            ShowCheckbox="true"
            AutoCheck="false">
        </ej:TreeView>

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.

JAVASCRIPT

//create an instance from an existing TreeView.
        // only after control creation we can get treeObj otherwise it throws exception.
        treeObj = $("#<%= treeView.ClientID %>").ejTreeView('instance');
                
        //to check node
        treeObj.checkNode("2");
    
        //to uncheck node
        treeObj.uncheckNode("2");

Get Checked Nodes

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

HTML

<script type="text/javascript">
        function onClick() {
            //create an instance from an existing TreeView.
            // only after control creation we can get treeObj otherwise it throws exception.
            treeObj = $("#<%= treeView.ClientID %>").ejTreeView('instance');
    
            //to get checked nodes
            treeObj.getCheckedNodes();
        }        
    </script>