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

ASP.Net TreeView - Handle node onclick event client side using JavaScript

In this short snippet article I will describe a JavaScript code snippet to have Client Side OnClick event for ASP.Net TreeView Node. So that when we click the node of ASP.Net TreeView control we can do some client side processing too.

Need for doing this is because by default TreeView node’s do not  have any client side events hence I have made use of JavaScript to induce client side events using the JavaScript code snippet provided below

TreeView

I have a simple ASP.Net TreeView below in which I’ll display a list of Fruits.

<form id="form1" runat="server">

    <asp:TreeView ID="TreeView1" runat="server">

       <SelectedNodeStyle ForeColor="Black" />

    </asp:TreeView>

</form>

 

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"));

    }

}

 

Client Side Scripting

<script type = "text/javascript">

        function OnLoad() {

            var links = document.getElementById("<%=TreeView1.ClientID %>").getElementsByTagName("a");

            for (var i = 0; i < links.length; i++) {

                links[i].setAttribute("href", "javascript:NodeClick(\"" + links[i].id + "\", \"" + links[i].getAttribute("href") + "\")");

            }

        }

        window.onload = OnLoad;

        function NodeClick(id, attribute) {

            //Do Something

            var nodeLink = document.getElementById(id);

            alert(nodeLink.innerHTML + " clicked");

 

            //Execute the server side event.

            eval(attribute);

        }

</script>

The script is very simple. On load of the page I am fetching all the links in the nodes of the TreeView and then replacing their HREF attribute with my custom function “NodeClick” where I want to do the client side processing.

Then in the NodeClick function I am doing my client side processing and then executing the original content of the HREF which is nothing but __doPostBack call which makes a PostBack to the server.

Screenshots