Get TreeView Selected Node in JavaScript

Last post 07-06-2009 3:54 AM by srinivaskotra. 2 replies.

Sort Posts:

  • Get TreeView Selected Node in JavaScript

    07-05-2009, 6:36 AM
    • Member
      point Member
    • Everest1980
    • Member since 11-02-2008, 7:30 AM
    • Posts 9

    Hello Friends

    I am looking to find a way to just simply know the selected node in TreeView using javascript. suppose there are n number of nodes in the Parent Child Relationship, then what i want to get value of the selected node in javascript so that i can manipulate and work on the values selected in javascript rather than do a full page postback to get the selected Tree node as selected by user in ASP.Net.

    is there any alternative to know the Node and whether the Node has any child or parent if any in javascript or not Frown

    here is my example which i am using to create and populate TreeView sorry for the last comment without the example, here is the full example


    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    TreeNode t_Node;
    using (OleDbConnection con = new OleDbConnection())
    {
    using (DataSet t_DS = new DataSet())
    {
    using (OleDbCommand myCommand = new OleDbCommand())
    {
    OleDbDataAdapter t_DA;
    con.ConnectionString = "Provider=SQLOLEDB;Data Source = .; Initial Catalog = NorthWind; User ID = sa; Password = ";
    myCommand.CommandText = "select EmployeeID, FirstName + ' ' + LastName As Name from Employees Order by EmployeeID";
    myCommand.Connection = con;
    try
    {
    con.Open();
    t_DA = new OleDbDataAdapter(myCommand);
    t_DA.Fill(t_DS);
    foreach (DataRow t_DR in t_DS.Tables[0].Rows)
    {
    t_Node = new TreeNode(t_DR["Name"].ToString(), t_DR["EmployeeID"].ToString());
    TreeView1.Nodes.Add(t_Node);
    }

    }
    catch (Exception ex)
    {
    Response.Write(String.Format("There is an error{0}", ex));
    }
    finally
    {
    con.Close();
    }
    }
    }
    }
    }
    }


  • Re: Get TreeView Selected Node in JavaScript

    07-06-2009, 2:41 AM
    Answer
    • Star
      10,250 point Star
    • chintanpshah
    • Member since 11-19-2008, 5:39 AM
    • Ahmedabad
    • Posts 1,833

    this.TreeView1.Attributes.Add("onclick", "Clicked(event);");

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

    Refer to:

    http://www.codeproject.com/KB/webforms/ASPNetTreeviewUsingJS.aspx

    Hope this helps...

    Don't forget to mark as answer, if it helps
  • Re: Get TreeView Selected Node in JavaScript

    07-06-2009, 3:54 AM
    Answer

    Hi,

    here your solution

    I have bound the Tree View like below:

     Collapse Copy Code
    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

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


    Java script code:

     Collapse Copy Code
    function RightClick(event)
    {
        var obj = event.srcElement || event.target ;
        var seltreeNode = obj;
        alert(seltreeNode.innerHTML); //This will prompt selected Node Text
        seltreeNode.innerHTML = "sample text"; //This will change the selected node text 

    }


    Happy Coding!

    http://www.codeproject.com/KB/webforms/ClientSideTreeView.aspx

     

    Remember to click “Mark as Answer” on the post, if it helps you. Because It helps others to find the solution.

    Srinivas Kotra.


Page 1 of 1 (3 items)