In this article I’ll explain how to get the selected node reference along with its Text and Value property of ASP.Net TreeView client side using JavaScript.
To start with I have added a simple ASP.Net TreeView and a button on my ASPX Page
<div>
<asp:TreeView ID="TreeView1" runat="server">
<SelectedNodeStyle ForeColor="Black" />
</asp:TreeView>
</div>
<asp:Button ID="Button1" runat="server" Text="GetSelectedNode" OnClientClick="return GetSelectedNode();" />
Above you will notice I calling a JavaScript method on the OnClientClick event which I’ll describe later
Now using the simple code snippet I am populating the ASP.Net TreeView with a list of fruits.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TreeView1.Nodes.Add(new TreeNode("Mango", "Fruit1"));
TreeView1.Nodes.Add(new TreeNode("Apple", "Fruit2"));
TreeView1.Nodes.Add(new TreeNode("Pineapple", "Fruit3"));
TreeView1.Nodes.Add(new TreeNode("Orange", "Fruit4"));
TreeView1.Nodes.Add(new TreeNode("Grapes", "Fruit5"));
}
}
Now here’s the script that will get the reference of the TreeView selected node and also extract its Text and Value part.
<script type="text/javascript">
function GetSelectedNode() {
var treeViewData = window["<%=TreeView1.ClientID%>" + "_Data"];
if (treeViewData.selectedNodeID.value != "") {
var selectedNode = document.getElementById(treeViewData.selectedNodeID.value);
var value = selectedNode.href.substring(selectedNode.href.indexOf(",") + 3, selectedNode.href.length - 2);
var text = selectedNode.innerHTML;
alert("Text: " + text + "\r\n" + "Value: " + value);
} else {
alert("No node selected.")
}
return false;
}
</script>
The above script looks for the ASP.Net TreeView Data object which stores the Selected Node of the TreeView control. Below screenshot describes the working of this script
With this we come to the end of this article. You can download the source code using the link below
TreeView-GetSelectedNodeinJavaScript.zip