Friday, April 17, 2009

TreeView Node Value at Client Side

As i said in my last post in this post i will demonstrate how to retrieve value of selected nodes at client side. First of all if you are not aware how to Populate Treeview dynamically with database fields and check/ Uncheck TreeView Checkboxes then please refer respective posts.

Here’s the snap of treeview selected nodes:

treenode

As you can see in above image that Designer is the parent node and others are child nodes. Now it is very necessary to understand how this will be rendered so that we can write appropriate ClientScript.

Here’s the rendered HTML of treeview node:

  1: <td style="white-space:nowrap;">
  2: <input type="checkbox" name="tvSamplen54CheckBox" id="tvSamplen54CheckBox" />
  3: <a class="tvSample_0" href="javascript:__doPostBack('tvSample','s14\\ENL44273F$14')" onclick="TreeView_SelectNode(tvSample_Data, this,'tvSamplet54');" id="tvSamplet54">ElizabethLincoln</a>
  4: </td>

our area of interest is <a> tag having green background colour in above code. It contains node value in it’s href attribute.

so Here’s the Client Script function that is useful to retrieve value of selected node at Client Side.


  1: //this function will return <a> tag and we can find the nodevalue in href attribute of it
  2:     function getNextSibling(element)
  3:     {
  4:         var n = element;
  5:         do n = n.nextSibling;
  6:         while (n && n.nodeType != 1);
  7:         return n;
  8:     }
  9:     //returns NodeValue
 10:     function GetNodeValue(node)
 11:     {
 12:         var nodeValue = "";
 13:         var nodePath = node.href.substring(node.href.indexOf(",") + 2, node.href.length - 2);
 14:         var nodeValues = nodePath.split("\\");
 15:         if (nodeValues.length > 1)
 16:             nodeValue = nodeValues[nodeValues.length - 1];
 17:         else
 18:             nodeValue = nodeValues[0].substr(1);
 19:         return nodeValue;
 20:     } 

Here’s the function that will call the function in above code. This function i posted in my previous post
but highlighted lines are additional.

  1: function OnTreeClick(evt)
  2: {
  3:
  4:  var src = window.event != window.undefined ? window.event.srcElement : evt.target;
  5:
  6:  var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
  7:
  8:  if(isChkBoxClick)
  9:  {
 10:    //gets node value if node is checked, this was my requirement
 11:     if (src.checked==true)
 12:     {
 13:         var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
 14:
 15:         var nodeValue = GetNodeValue(getNextSibling(src));
 16:
 17:         alert("Text: " + nodeText + "," + "Value: " + nodeValue);
 18:     }
 19:      var parentTable = GetParentByTagName("table", src);
 20:
 21:      var nxtSibling = parentTable.nextSibling;
 22:
 23:      //check if nxt sibling is not null & is an element node
 24:       if(nxtSibling && nxtSibling.nodeType == 1)
 25:      {
 26:
 27:           //if node has children    
 28:          if(nxtSibling.tagName.toLowerCase() == "div")
 29:          {
 30:
 31:              //check or uncheck children at all levels
 32:              CheckUncheckChildren(parentTable.nextSibling, src.checked);
 33:
 34:          }
 35:      }
 36:
 37:  //check or uncheck parents at all levels
 38:  CheckUncheckParents(src, src.checked);
 39:
 40:  }
 41:
 42: }

In my next post i will write about how to retrieve value of selected nodes at client side.

I hope this helps!! Smile

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