ASP.Net TreeView - Get selected node Text and Value Client Side using JavaScript

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