Skip to main content

Tree View Checkbox Tree Structured

Code :

<asp:TreeView ID="treeviewspcode" runat="server" ShowCheckBoxes="All" OnClick="OnTreeClick(event)" ShowLines="True" Width="100%">
                    <HoverNodeStyle BackColor="Yellow" BorderColor="#FF0066" BorderStyle="Solid" BorderWidth="1px" />
                    <SelectedNodeStyle BackColor="#FFFF99" BorderColor="#FF3300" BorderStyle="Dotted" BorderWidth="1px" />
                </asp:TreeView>


JAVASCRIPT CODE HERE :

  <script type="text/javascript">
        function OnTreeClick(evt) {
            var src = window.event != window.undefined ? window.event.srcElement : evt.target;          
            var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
            if (isChkBoxClick) {
                if (src.checked == true) {
                    var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
                    var nodeValue = GetNodeValue(getNextSibling(src));

                    //document.getElementById("label").innerHTML += nodeText + ",";
                }
                else {
                    var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
                    var nodeValue = GetNodeValue(getNextSibling(src));
                    //var val = document.getElementById("label").innerHTML;
                    //document.getElementById("label").innerHTML = val.replace(nodeText + ",", "");
                }
                var parentTable = GetParentByTagName("table", src);
                var nxtSibling = parentTable.nextSibling;
                //check if nxt sibling is not null & is an element node
                if (nxtSibling && nxtSibling.nodeType == 1) {
                    //if node has children  
                    if (nxtSibling.tagName.toLowerCase() == "div") {
                        //check or uncheck children at all levels
                        CheckUncheckChildren(parentTable.nextSibling, src.checked);
                    }
                }
                //check or uncheck parents at all levels
                CheckUncheckParents(src, src.checked);
            }
        }
        function CheckUncheckChildren(childContainer, check) {
            var childChkBoxes = childContainer.getElementsByTagName("input");
            var childChkBoxCount = childChkBoxes.length;
            for (var i = 0; i < childChkBoxCount; i++) {
                childChkBoxes[i].checked = check;
            }
        }

        function CheckUncheckParents(srcChild, check) {
            var parentDiv = GetParentByTagName("div", srcChild);
            var parentNodeTable = parentDiv.previousSibling;
            if (parentNodeTable) {
                var checkUncheckSwitch;
                //checkbox checked
                if (check) {
                    var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                    if (isAllSiblingsChecked)
                        checkUncheckSwitch = true;
                    else
                        return; //do not need to check parent if any(one or more) child not checked
                }
                else //checkbox unchecked
                {
                    checkUncheckSwitch = false;
                }
                var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
                if (inpElemsInParentTable.length > 0) {
                    var parentNodeChkBox = inpElemsInParentTable[0];
                    parentNodeChkBox.checked = checkUncheckSwitch;
                    //do the same recursively
                    CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
                }
            }
        }

        function AreAllSiblingsChecked(chkBox) {
            var parentDiv = GetParentByTagName("div", chkBox);
            var childCount = parentDiv.childNodes.length;
            for (var i = 0; i < childCount; i++) {
                if (parentDiv.childNodes[i].nodeType == 1) {
                    //check if the child node is an element node
                    if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                        var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                        //if any of sibling nodes are not checked, return false
                        if (!prevChkBox.checked) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }
        //utility function to get the container of an element by tagname
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        }

        function getNextSibling(element) {
            var n = element;
            do n = n.nextSibling;
            while (n && n.nodeType != 1);
            return n;
        }
        //returns NodeValue
        function GetNodeValue(node) {
            var nodeValue = "";
            var nodePath = node.href.substring(node.href.indexOf(",") + 2, node.href.length - 2);
            var nodeValues = nodePath.split("\\");
            if (nodeValues.length > 1)
                nodeValue = nodeValues[nodeValues.length - 1];
            else
                nodeValue = nodeValues[0].substr(1);
            return nodeValue;
        }
    </script>

Done :)

Comments

Popular posts from this blog

Snake Xenzia

Hello friends did you remember the GAME you play on nokia 1100 , SNAKE XENZIA .Yeah the same you are thinking ,a snake eating food and go longer and longer till it dies. Why to play it on mobile when it is available on your pc ??? It is made in .net framework 4.0 .Just install the setup and play SNAKE XENZIA . Have Fun !! DOWNLOAD IT   HERE  . Related articles Rattlesnake Dreams "Classsic Snake Game In C"? Resident Evil 6 gamescom demo takes in a giant snake battle Snakes & ladders

New Smartphone with 12GB RAM, 1TB storage unveiled

Here is the News -- Turing Robotics Industries (TRI) has unveiled its latest smartphone - the Turing Phone Cadenza. It comes with 'Voice On' technology which enables the smartphone to be switched On/Off using voice commands. Users can also use these voice commands for biometric authentication. The Turing Phone Cadenza features a 5.8-inch Quad HD display of 1440x2560 pixel resolution. It is powered by not one, but two Qualcomm Snapdragon 830 (even though the same hasn't been officially announced) CPUs paired with a an astonishing 12GB of RAM and 1TB of internal storage. The storage can be further expanded up to 500GB by installing a microSD card. The Cadenza runs Turing's own Swordfish OS with deep learning Artificial Intelligence (AI) features a 60MP rear camera with IMAX 6K recording facility and a 20MP dual-front camera. Users can install up to 4 sim cards in the smartphone and it houses a huge 100Wh battery with graphene and hydrogen fuel cells.  In related ne...

Export Doc,Access,Image,CSV,Excel,Pdf,XML,HTML,Text,Print of Gridview in Asp.net

First import itextsharp.dll in the solution and use three namespces (basically for pdf) using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.html.simpleparser;          Then Use the following code :- on each button  click  protected void Page_Load(object sender, EventArgs e)         {             if (!Page.IsPostBack)             {                 BindGridDetails(GridView1);             }         }                 protected DataTable BindGridDetails(GridView GridView1)         {   ...