Saturday, 4 April 2015

ASP.NET - Create TreeView with CheckBoxes - Check/Uncheck on client and server side

Watch this example on YouTube:

-HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavascriptTest.aspx.cs" Inherits="WebApplication1.JavascriptTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ClientSideChangeSelection() {
            var chkBox = window.event.srcElement;
            var isChecked;
            var isCheckBox = false;

            if (chkBox.tagName == "INPUT" && chkBox.type.toUpperCase() == "CHECKBOX") {
                var treeNode = chkBox;
                isChecked = treeNode.checked;
                do{
                    chkBox = chkBox.parentElement;
                } while (chkBox.tagName != "TABLE")
                var firstLevel = chkBox.rows[0].cells.length;

                var tableElements = chkBox.parentElement.getElementsByTagName("TABLE");
                var tableElementsCount = tableElements.length;
                if (tableElementsCount > 0) {
                    for (i = 0; i < tableElementsCount; i++) {
                        if (tableElements[i] == chkBox) {
                            i++;
                            isCheckBox = true;
                            if (i == tableElementsCount) {
                                return;
                            }
                        }
                        if (isCheckBox == true) {
                            var secondLevel = tableElements[i].rows[0].cells.length;
                            if (secondLevel > firstLevel) {
                                var cell = tableElements[i].rows[0].cells[secondLevel - 1];
                                var inputElement = cell.getElementsByTagName("INPUT");
                                inputElement[0].checked = isChecked;
                            }
                            else {
                                return;
                            }
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" onclick="ClientSideChangeSelection()" ShowCheckBoxes="All"  runat="server"></asp:TreeView>
    </div>
    </form>
</body>
</html>

-CODE BEHIND

        protected void Page_Load(object sender, EventArgs e)
        {
            TreeNode tNode1 = new TreeNode();
            tNode1.Text = "HeadNode1";
            tNode1.Value = "HeadNode1";

            TreeNode h1ChildNode1 = new TreeNode();
            h1ChildNode1.Text = "Head1Child1";
            tNode1.ChildNodes.Add(h1ChildNode1);

            TreeNode h1GrandChild1 = new TreeNode();
            h1GrandChild1.Text = "Head1Child1Grand1";
            h1ChildNode1.ChildNodes.Add(h1GrandChild1);

            TreeNode h1ChildNode2 = new TreeNode();
            h1ChildNode2.Text = "Head1Child2";
            tNode1.ChildNodes.Add(h1ChildNode2);

            TreeNode h1ChildNode3 = new TreeNode();
            h1ChildNode3.Text = "Head1Child3";
            tNode1.ChildNodes.Add(h1ChildNode3);
            TreeView1.Nodes.Add(tNode1);

            TreeNode tNode2 = new TreeNode();
            tNode2.Text = "HeadNode2";
            tNode2.Value = "HeadNode2";

            TreeNode h2ChildNode1 = new TreeNode();
            h2ChildNode1.Text = "Head2ChildNode1";
            tNode2.ChildNodes.Add(h2ChildNode1);

            TreeNode h2ChildNode2 = new TreeNode();
            h2ChildNode2.Text = "Head2ChildNode2";
            tNode2.ChildNodes.Add(h2ChildNode2);

            TreeNode h2ChildNode3 = new TreeNode();
            h2ChildNode3.Text = "Head2ChildNode3";
            tNode2.ChildNodes.Add(h2ChildNode3);

            TreeView1.Nodes.Add(tNode2);

            ServerSideChangeSelection(TreeView1, true);

        }

        protected TreeView ServerSideChangeSelection(TreeView t, bool check)
        {
            foreach (TreeNode tn in t.Nodes)
            {
                tn.Checked = check;
                if(tn.ChildNodes.Count > 0 ){
                    foreach(TreeNode childNd in tn.ChildNodes){
                        childNd.Checked = check;
                    }
                }
            }
            return t;
        }

No comments:

Post a Comment