TreeNode Node onclick Server Side Event Implementation – ASP.Net TreeView Click C# VB.Net

Asp.Net gives us a nice TreeView Control to re present data in hierarchical way. But unfortunately we did not get any TreeNode Node onclick Server Side Event to implement. After searching a lot feeling unlucky & realize that it’s a must need feature which is still absent. The truth is no direct way to implement the TreeView node click event from server side code. So what is the alternative way to implement it? Finally I came back with a tricky solution & hope it will definitely help some of C# & VB.Net Asp.Net coders to overcome the issue. Though it’s not an elegant solution at all but for those who is running out of time, the below code example on treeview node click event in c# VB.Net will surely help you a lot. To load data into a TreeView Control please read “Bind TreeView Control with SQL Server Database to Display Hierarchical Data“. Now I am assuming that you can fill or populate the control with data.
treenode node onclick server side-Treeview Node Click Event code for c#

Add TreeView Control:

Please add your TreeView Control like below:

<div style="float:left;padding-right:200px">
        <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"></asp:TreeView>

<div style="display:inline;font-weight:bold;">
        <asp:Label runat="server" ID="lblNode"></asp:Label>
        <asp:Label runat="server" ID="lblTime"></asp:Label>
        <asp:Label runat="server" ID="lblText"></asp:Label>
        <asp:Label runat="server" ID="lblID"></asp:Label>

Now load data as described above.

Don’t forget to add below Namespaces:

using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;

TreeNode Node onclick Server Side Event:

As stated earlier there is no direct handler to catch this event. The alternative event handler is “SelectedNodeChanged”. Getting confused? Are you thinking what will happen if we click twice on same TreeNode or the previously selected node? Then you are in the right way. OK let’s check how I cover this. Implement the below server side code:

Asp.Net C# Code:

    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
        if (ViewState["PrevSelectedNode"]!=null)

        TreeNode SelectedNode = TreeView1.SelectedNode;
        lblNode.Text = "ValuePath: " + SelectedNode.ValuePath;
        lblTime.Text = DateTime.Now.ToString();
        lblText.Text = "Node Text: "+SelectedNode.Text;
        lblID.Text = "Rec ID: " + SelectedNode.Value;
        ViewState["PrevSelectedNode"] = SelectedNode.ValuePath;
        ViewState["PrevSelectedText"] = SelectedNode.Text;
        this.TreeView1.SelectedNode.Selected = false;
        SelectedNode.Text = "<span id='SelectedNode'>" + SelectedNode.Text + "</span>";

Asp.Net VB.Net Code:

 Protected Sub TreeView1_SelectedNodeChanged(sender As Object, e As EventArgs)
 If ViewState("PrevSelectedNode") IsNot Nothing Then
 TreeView1.FindNode(ViewState("PrevSelectedNode").ToString()).Text = ViewState("PrevSelectedText").ToString()
 End If

 Dim SelectedNode As TreeNode = TreeView1.SelectedNode
 lblNode.Text = "ValuePath: " + SelectedNode.ValuePath
 lblTime.Text = DateTime.Now.ToString()
 lblText.Text = "Node Text: " + SelectedNode.Text
 lblID.Text = "Rec ID: " + SelectedNode.Value
 ViewState("PrevSelectedNode") = SelectedNode.ValuePath
 ViewState("PrevSelectedText") = SelectedNode.Text
 Me.TreeView1.SelectedNode.Selected = False
 SelectedNode.Text = "<span id='SelectedNode'>" + SelectedNode.Text + "</span>"
 End Sub

Corresponding CSS Code:

Paste the below css code within Site.css file:


Demo Output on Treeview Node Click Event:

Code Explanation:

If we think the purpose of the TreeNode Node onclick Server Side Event – it could be 2.

  • Redirection
  • In-page data population

For url redirection we don’t need to think about 2nd click. Because after clicking the TreeView node you will be redirected to another page. So, the SelectedNodeChanged event will serve your purpose. The problem is if you stay in the same page then the said event won’t fire twice because it’s already selected. To eliminate this problem I have set the SelectedNode Selected property to false to tell that the TreeView has no selected node right now. So whenever a user click on the same node twice the event will fire logically. But in this scenario you will face another problem. The problem is you will loose all CSS styles that you have mentioned for the Selected Node after the click. In this example the only CSS is font bold & italic. To overcome this I have stored the ValuePath & Text properties of the treeview selected node in ViewState. It will help me to get previously clicked TreeView selected node to clear & reassign my desired CSS later on.

You may think why I am storing ValuePath of the TreeNode instead of Treeview selected node object. Yes we can store the whole treenode in viewstate rather the valuepath. But there is a problem that viewstate can store only serialized object. Since we need more code to store I have choose the another alternate property ValuePath to keep this example simple. But I strongly recommend to store the node object. Because it will give you more flexibility to play on.

Finally as per my understanding this is the most easiest way to implement TreeNode Node onclick Server Side Event. If you have any different easy or elegant solution to implement treeview node click event in c# VB.Net please don’t forget to share through comment. It will help others a lot.

Download C# & VB.NET Source Code:

If you need to download complete implementation of treeview node click event in c# or please follow the below 2 links:
Download C# Code Example        Download Code Example VB.Net

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code