TreeView Node Value at Client Side

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

Here’s the snap of Treeview selected nodes:


As you can see in the above image, the Designer is the parent node, and the 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 the treeview node:

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

Our area of interest is <a> tag having green background colour in the above code. It contains node value in its href attribute. So the Client Script function retrieves the selected node’s value on the Client Side.

//this function will return <a> tag and we can find the nodevalue in href attribute of it
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];
        nodeValue = nodeValues[0].substr(1);
    return nodeValue;

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

 function OnTreeClick(evt)

  var src = window.event != window.undefined ? window.event.srcElement :;

  var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");

     //gets node value if node is checked, this was my requirement
      if (src.checked==true)
          var nodeText = getNextSibling(src).innerText || getNextSibling(src).innerHTML;
          var nodeValue = GetNodeValue(getNextSibling(src));
          alert("Text: " + nodeText + "," + "Value: " + nodeValue);
       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);

In my next post, I will write about retrieving the value of selected nodes on the client side.

I hope this helps!





2 responses to “TreeView Node Value at Client Side”

  1. sneha-akshitarak Avatar

    This comment has been removed by a blog administrator.

  2. livenaruto Avatar

    I just wanted to know how to expand all child nodes when you click parent nodes and vice versa.

Leave a Reply

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

%d bloggers like this: