Assign Nodes an ID in XML and retrieve that ID

[Bailey Everitt]

Hi Everyone,

I've got a TreeView control (in a splitter, left hand panel) that will have 100+ nodes, and the nodes are loaded by an XML file.  When the user clicks on one of the nodes, that will open the page in the right hand panel using the following js:

    <script type="text/javascript">
      function ClientNodeClicked(sender, eventArgs)
        {
            var treeNode = eventArgs.get_node();
            var nodeValue = treeNode.get_text();
            alert(nodeValue);

            if (nodeValue == "1")
            {
                window.open("page1.aspx", "RadPane2");
            }
            else if (nodeValue == "1.1")
            {
                window.open("page2.aspx", "RadPane2");
            }
        }
    </script>

The thing is, I want to assign an ID to each node in the XML file, because some of the nodes will have the same text.  Is it possible to do this (below is my abridged XML file, but I'm not sure if I can use the "ID" property.)  Basically, how to assign a unique ID to each node and retrieve it?  Any help is greatly appreciated.

<?xml version="1.0" encoding="UTF-8"?>
<Tree>
  <Node ID="1" Text="Node 1" >
    <Node ID="1.1" Text="Node 1.1" />
  </Node>
</Tree>

-Matt

[Atanas Korchev]

Hi Matthew Kay,

You cannot assign the ID property. Try the Value property instead. You can then use the get_value() client-side method to retrieve it.

All the best,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bailey Everitt]

Ok, I've updated it the following way, however, the get_value() method returns null.

<?xml version="1.0" encoding="UTF-8"?>
<Tree>
  <Node Text="Node 1" Value="1">
    <Node Text="Node 1.1" Value="1.1"/>
  </Node>
</Tree>

    <script type="text/javascript">
      function ClientNodeClicked(sender, eventArgs)
        {
            var treeNode = eventArgs.get_node();
            var nodeValue = treeNode.get_value();
            alert(nodeValue);

            if (nodeValue == "1")
            {
                window.open("page1.aspx", "RadPane2");
            }
            else if (nodeValue == "1.1")
            {
                window.open("page2.aspx", "RadPane2");
            }
        }
    </script>

[Atanas Korchev]

Hi Matthew Kay,

Please make sure (with the debugger) that the Value property of the nodes is set after loading the xml file.

Best wishes,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bailey Everitt]

Here's is my code behind.  Should I be loading the XML file another way:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Telerik.Web.UI;
using System.Xml;

namespace Web
{
    public partial class TreeView : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(Server.MapPath("~/LargeTree.xml"));
            Cache["XmlDocument"] = xmlDoc;

            foreach (XmlNode node in xmlDoc.SelectNodes("/Tree/Node"))
            {
                RadTreeNode treeNode = new RadTreeNode(node.Attributes["Text"].Value);
                treeNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                RadTreeView1.Nodes.Add(treeNode);
            }
        }

        protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
        {
            string nodeText = e.Node.Text;
            XmlDocument xmlDoc = (XmlDocument)Cache["XmlDocument"];

            e.Node.Nodes.Clear();
            XmlNode expandedNode = xmlDoc.SelectSingleNode("//Node[@Text='" + nodeText + "']");
            foreach (XmlNode node in expandedNode.ChildNodes)
            {
                RadTreeNode treeNode = new RadTreeNode(node.Attributes["Text"].Value);
                if (node.ChildNodes.Count > 0)
                {
                    treeNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                }

                e.Node.Nodes.Add(treeNode);
            }

            e.Node.Expanded = true;
        }
    }
}

[Atanas Korchev]

Hello Matthew Kay,

Since you are loading the xml by hand your code should be setting the Value property of the node. Alternatively you can use the LoadXml method of the treeview - it should load the xml automatically.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bailey Everitt]

I'll try loading the XML file the other way to see if that works.  In the meantime, here is my ASPX code if you want to try to reproduce the problem:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView.aspx.cs" Inherits="Web.TreeView" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>Untitled Page</title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
    </style>

    <script type="text/javascript">
      function ClientNodeClicked(sender, eventArgs)
        {
            var treeNode = eventArgs.get_node();
            var nodeValue = treeNode.get_value();
            alert(nodeValue);

            if (nodeValue == "1")
            {
                window.open("page1.aspx", "RadPane2");
            }
            else if (nodeValue == "1.1")
            {
                window.open("page2.aspx", "RadPane2");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <div id="header" style="height: 40px; border-bottom: 1px black;"></div>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="True" Skin="WebBlue"
        Height="100%" Width="100%" HeightOffset="62">
        <telerik:RadPane ID="RadPane1" runat="server" Height="17px" Width="250px" MaxWidth="400"
            MinWidth="200">
            <telerik:RadTreeView ID="RadTreeView1" Runat="server" LoadingMessage=""
                OnClientNodeClicked="ClientNodeClicked" Skin="Web20"
                onnodeexpand="RadTreeView1_NodeExpand">
                <CollapseAnimation Duration="400" />
                <ExpandAnimation Duration="400" />
            </telerik:RadTreeView>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
        <telerik:RadPane ID="RadPane2" runat="server" ContentUrl="about:blank">
        </telerik:RadPane>
    </telerik:RadSplitter>
    <div id="footer" style="height: 20px; border-top: 1px black;"></div>
    </form>
</body>
</html>

[Atanas Korchev]

Hi Matthew Kay,

Your code is not setting the Value property of the generated tree nodes. This is the reason why it remains null.

Best wishes,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bailey Everitt]

Sorry, can you be a little more specific, do I have to assign each node (text and value) within the ASPX file or can I still use the XML file?  Thanks a ton for all your help.

[Simon]

Hi Matthew Kay,

You could specify Values in the XML file similarly to specifying the Text of Nodes, e.g.

<?xml version="1.0" encoding="UTF-8"?>
<Tree>
  <Node ID="1" Text="Node 1" Value="1">
    <Node ID="1.1" Text="Node 1.1" Value="1.1" />
  </Node>
</Tree>

and populate them in the code-behind, e.g.

            foreach (XmlNode node in xmlDoc.SelectNodes("/Tree/Node"))
            {
                RadTreeNode treeNode = new RadTreeNode(node.Attributes["Text"].Value, node.Attributes["Value"].Value);
                treeNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                RadTreeView1.Nodes.Add(treeNode);
            }

Sincerely yours,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bailey Everitt]

You guys are awesome! Thanks!