To Edit ASP.Net Treeview's selected node using Java Script

Introduction

This article will help to modify the text of the selected node of ASP.NET Tree View. I hope I can explain this in a simple manner so that people can easy to understand and implement it. I did this for my application and I could avoid the page post back.

Using the code

I have bound the Tree View like below:

TreeNode root = new TreeNode("School");

TreeNode teach = new TreeNode("Teachers");
TreeNode stud = new TreeNode("Students");

TreeNode teach1 = new TreeNode("Teacher1");
TreeNode teach2 = new TreeNode("Teacher2");
TreeNode teach3 = new TreeNode("Teacher3");

TreeNode stud1 = new TreeNode("Student1");
TreeNode stud2 = new TreeNode("Student2");
TreeNode stud3 = new TreeNode("Student3");
TreeNode stud4 = new TreeNode("Student4");

teach.ChildNodes.Add(teach1); teach.ChildNodes.Add(teach2);
teach.ChildNodes.Add(teach3);

stud.ChildNodes.Add(stud1); stud.ChildNodes.Add(stud2);
stud.ChildNodes.Add(stud3); stud.ChildNodes.Add(stud4);

root.ChildNodes.Add(teach); root.ChildNodes.Add(stud);

TreeView1.Nodes.Add(root);

And attach this java script event to the Treeview

this.TreeView1.Attributes.Add("oncontextmenu", "RightClick(event);");

Java script code:

function RightClick(event)
{
    var obj = event.srcElement || event.target ;
    var seltreeNode = obj; 
    alert(seltreeNode.innerHTML); //This will prompt selected Node Text
    seltreeNode.innerHTML = "Rajesh Babu"; //This will change the selected node text as “Rajesh Babu”
}

Happy Coding!