Check/ Uncheck Treeview Checkboxes with Javascript

As I said in my last post, I would post the code on retrieving treeview node values on the client and server sides. But before that, we must add a client script to check/ uncheck treeview checkboxes.

First of all, add the following to your page_load event:

C#

 If(!isPostBack)
 {
     TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
 }

VB

 if not Ispostback then
   TreeView1.Attributes.Add("onclick","OnTreeClick(event)")
 End if

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)  
      {      
           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;
 }

Next time I will post about retrieving value on the Client and Server Sides.

I hope this helps!


Posted

in

,

by

Comments

4 responses to “Check/ Uncheck Treeview Checkboxes with Javascript”

  1. Danish Avatar

    Thanks Nilesh, really amaze.

  2. Abdul Salam K.A Avatar

    Thank you very much….:)

  3. tamilpadalgalonline Avatar

    Thanks alot.. it is really useful

  4. […] I said in my last post, in this post, I will demonstrate how to retrieve the value of selected nodes on the client side. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: