Monday, April 13, 2009

Check/ Uncheck Treeview Checkboxes with Javascript

As i said in my last post that i will post code how to retrieve treeview node values at client side as well as server side. But before that we have to add client script to check/ uncheck treeview checkboxes.

First of all add following in your page_load event:

C#

  1: If(!isPostBack)
  2: {
  3:     TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
  4: }
VB
  1: if not Ispostback then
  2:   TreeView1.Attributes.Add("onclick","OnTreeClick(event)")
  3: End if
JavaScript
  1: <script type="text/javascript">
  2: function OnTreeClick(evt)
  3: {
  4:  var src = window.event != window.undefined ? window.event.srcElement : evt.target;
  5:  var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
  6:  if(isChkBoxClick)
  7:  {
  8:      var parentTable = GetParentByTagName("table", src);
  9:      var nxtSibling = parentTable.nextSibling;
 10:      //check if nxt sibling is not null & is an element node
 11:       if(nxtSibling && nxtSibling.nodeType == 1)
 12:      {
 13:           //if node has children    
 14:          if(nxtSibling.tagName.toLowerCase() == "div")
 15:          {
 16:              //check or uncheck children at all levels
 17:              CheckUncheckChildren(parentTable.nextSibling, src.checked);
 18:          }
 19:      }
 20:  //check or uncheck parents at all levels
 21:  CheckUncheckParents(src, src.checked);
 22:  }
 23: }
 24:
 25:  function CheckUncheckChildren(childContainer, check)
 26: {
 27:  var childChkBoxes = childContainer.getElementsByTagName("input");
 28:       var childChkBoxCount = childChkBoxes.length;
 29:  for(var i=0;i<childChkBoxCount;i++)
 30:  {
 31:      childChkBoxes[i].checked = check;
 32:  }
 33: }
 34:
 35: function CheckUncheckParents(srcChild, check)
 36: {
 37:  var parentDiv = GetParentByTagName("div", srcChild);
 38:  var parentNodeTable = parentDiv.previousSibling;
 39:  if(parentNodeTable)
 40:  {
 41:      var checkUncheckSwitch;
 42:     //checkbox checked 
 43:      if(check)
 44:      {
 45:          var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
 46:          if(isAllSiblingsChecked)
 47:                  checkUncheckSwitch = true;
 48:          else
 49:                  return; //do not need to check parent if any(one or more) child not checked
 50:      }
 51:      else //checkbox unchecked
 52:      {
 53:          checkUncheckSwitch = false;
 54:      }
 55:  
 56:      var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
 57:      if(inpElemsInParentTable.length > 0)
 58:      {
 59:          var parentNodeChkBox = inpElemsInParentTable[0];
 60:          parentNodeChkBox.checked = checkUncheckSwitch;
 61:          //do the same recursively
 62:         CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
 63:      }
 64:  }
 65: }
 66:
 67: function AreAllSiblingsChecked(chkBox)
 68: {
 69:  var parentDiv = GetParentByTagName("div", chkBox);
 70:  var childCount = parentDiv.childNodes.length;
 71:  for(var i=0;i<childCount;i++)
 72:  {
 73:      if(parentDiv.childNodes[i].nodeType == 1)
 74:      {
 75:          //check if the child node is an element node
 76:          if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
 77:          {
 78:              var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
 79:              //if any of sibling nodes are not checked, return false
 80:              if(!prevChkBox.checked)
 81:              {
 82:                  return false;
 83:              }
 84:          }
 85:      }
 86:  }
 87:  return true;
 88: }
 89:
 90: //utility function to get the container of an element by tagname
 91: function GetParentByTagName(parentTagName, childElementObj)
 92: {
 93:  var parent = childElementObj.parentNode;
 94:  while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
 95:      {
 96:          parent = parent.parentNode;
 97:      }
 98:  return parent;
 99: }
100:     </script>

Next time i will post about how to retrieve value at Client Side and Server Side.

I hope this helps!! Happy

3 comments:

Danish said...

Thanks Nilesh, really amaze.

Abdul Salam K.A said...

Thank you very much....:)

tamilpadalgalonline said...

Thanks alot.. it is really useful