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>
</td>
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];
else
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 : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
if(isChkBoxClick)
{
//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!
Leave a Reply