In this article I will explain with an example, how to handle
TreeView node onclick event on client side using
JavaScript in C# and VB.Net.
HTML Markup
The following HTML Markup consists of:
TreeView – For displaying data.
The TreeView consists of the SelectedNodeStyle property.
<asp:TreeView ID="tvFruits" runat="server">
<SelectedNodeStyle ForeColor="Black" />
</asp:TreeView>
Handle node onclick event on client side using JavaScript
Inside, the
OnLoad JavaScript function, the Nodes of the
TreeView is referenced using dynamically generated identifier.
A FOR loop is executed over the referenced nodes and
HREF attribute is replaced with custom
JavaScript function
NodeClick JavaScript function.
NodeClick
Inside the
NodeClick JavaScript function, the Text of the clicked Node is displayed using
JavaScript Alert Message Box.
<script type="text/javascript">
function OnLoad() {
var links = document.getElementById("<%=tvFruits.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>
Namespaces
You will need to import the following namespace.
C#
using System.Web.UI.WebControls;
VB.Net
Imports System.Web.UI.WebControls
Populating TreeView
Inside the Page_Load event handler, the name and value of the fruits are added as Node to the TreeView.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
tvFruits.Nodes.Add(new TreeNode("Mango", "Fruit 1"));
tvFruits.Nodes.Add(new TreeNode("Apple", "Fruit 2"));
tvFruits.Nodes.Add(new TreeNode("Pineapple", "Fruit 3"));
tvFruits.Nodes.Add(new TreeNode("Orange", "Fruit 4"));
tvFruits.Nodes.Add(new TreeNode("Grapes", "Fruit 5"));
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
tvFruits.Nodes.Add(New TreeNode("Mango", "Fruit 1"))
tvFruits.Nodes.Add(New TreeNode("Apple", "Fruit 2"))
tvFruits.Nodes.Add(New TreeNode("Pineapple", "Fruit 3"))
tvFruits.Nodes.Add(New TreeNode("Orange", "Fruit 4"))
tvFruits.Nodes.Add(New TreeNode("Grapes", "Fruit 5"))
End If
EndSub
Screenshot
Demo
View Demo
Downloads