I have a treeview control in my web application. I build this tree view dynamically.
Is there anyway to select a node and change the color of the selected node using javascript or any other method running in client side(i mean without post back).
i am using c# and asp.net to bulid my application
2 ways I can thought of to implement this:
More details for method 2 as followed..
Place treeview control onto aspx page
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
Add dummy nodes and call recursive function to remove hyperlinks
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//add dummy nodes
TreeView1.Nodes.Add(new TreeNode() { Value = "1", Text = "One" });
TreeView1.Nodes.Add(new TreeNode() { Value = "2", Text = "Two" });
TreeView1.Nodes.Add(new TreeNode() { Value = "3", Text = "Three" });
//call recursive function to remove hyperlinks
RemoveHyperLinks(TreeView1, TreeView1.Nodes);
}
}
Implement the recursive function
System.Web.UI.WebControls.TreeView RemoveHyperLinks(System.Web.UI.WebControls.TreeView treeView, TreeNodeCollection treeNodes)
{
foreach (TreeNode node in treeNodes)
{
node.SelectAction = TreeNodeSelectAction.None;//here the link is removed
if (node.ChildNodes != null && node.ChildNodes.Count > 0)
{
treeView = RemoveHyperLinks(treeView, node.ChildNodes);
}
}
return treeView;
}
Place this JQuery code on aspx page
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
EDIT (To explain a little more on JQuery):
JQuery is a .js file containing JavaScript functions to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.
You can download JQuery.js file from JQuery official website, then reference to the JQuery.js file (like you reference to other .js file) before you call your first JQuery script, as followed:
<script type="text/javascript" src="jQuery.js"></script>
Or alternatively, you can use the JQuery.js file hosted by Google. This is what I did for my testing. Below is the complete code of my .aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="TreeView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2).
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</div>
</form>
</body>
</html>