KaushaL.NET

TreeView: Automatically check all ChildNode CheckBoxes on Checking ParentNode CheckBox using JavaScript

Below, is the JavaScript code function snippet I used in one of my web application; to provide the functionality of "Select All Child" when ParentNode CheckBox is Checked; means to automatically Check all the ChildNode CheckBoxes, when you Check the ParentNode. I used the TreeView Control with ShowCheckBoxes Property.

    <script type="text/javascript" language="javascript">
    function SelectAllChildNodes()
    {
        //debugger;
        var obj = window.event.srcElement;
        var treeNodeFound = false;

        var checkedState;
        if (obj.tagName == "INPUT" && obj.type == "checkbox")
        {
            var treeNode = obj;
            checkedState = treeNode.checked;
            do
            {
                obj = obj.parentElement;
            } while (obj.tagName != "TABLE")
            
            var parentTreeLevel = obj.rows[0].cells.length;            
            var parentTreeNode = obj.rows[0].cells[0];
            var tables = obj.parentElement.getElementsByTagName("TABLE");
            var numTables = tables.length;
            if (numTables >= 1)
            {
                for (iCount=0; iCount < numTables; iCount++)
                {
                    if (tables[iCount] == obj)
                    {
                        treeNodeFound = true;
                        iCount++;
                        if (iCount == numTables)
                        {
                            return;
                        }
                    }
                    if (treeNodeFound == true)
                    {
                        var childTreeLevel = tables[iCount].rows[0].cells.length;
                        if (childTreeLevel > parentTreeLevel)
                        {
                            var cell = tables[iCount].rows[0].cells[childTreeLevel - 1];
                            var inputs = cell.getElementsByTagName("INPUT");
                            inputs[0].checked = checkedState;
                        }
                        else
                        {
                            return;
                        }
                    }
                }
            }
        }
    }
    </script>

Finally, call the function in "onClick" event of TreeView Control as,

        <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" onclick="SelectAllChildNodes()">
            <Nodes>
                <%--TreeView Nodes--%>
            </Nodes>
        </asp:TreeView>

Hope it may help to whom want to achieve this common functionality using TreeView.