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

1 comment:

sneha-akshitarak said...
This comment has been removed by a blog administrator.