New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Attributes

  • Marketing
    • Carina Joplin
    • Tom Wolfe
  • Sales
    • Dashiel Robins
    • Carla Gillotti
    • Jane Adams
  • R & D
    • Giorgio Aressi
    • Lydia Kraus
  • Development
    • George Malinovsky
    • Mashona Washington
  • Design
    • Iren Patello
    • Nick Angel
    • Mike Zivin
Details: Carina Joplin
Position: Marketing Director
Mobile: 555-888-201
Email: carina.joplin@example.com
Room: 201
Custom attributes are a convenient way to store custom data for the TreeNodes.

There are three ways of defining custom attributes:

  • Define custom attributes inline (in the ASPX/ASCX file) 
      <telerik:RadTreeNode Position="Sales" Text="Carina Joplin" ></telerik:RadTreeNode>
  • Define custom attributes in the code-behind.

         [C#] 
      RadTreeNode node = new RadTreeNode();
  node.Attributes["Position"] = "Sales";
         [VB] 
      Dim node As RadTreeNode = New RadTreeNode()
  node.Attributes("Position") = "Sales"
  • Define custom attributes at the client-side:

     <script type="text/javascript">
   function onClientNodeClickingHandler(sender, args)
   { 	
        var node = args.get_node();

            //Pass the "AttributeName" and "AttributeValue" as parameters of the setAttribute method
	node.get_attributes().setAttribute("Position", "Sales");
    
               

            //You can obtain the value of a custom attribute like shown below

            //Pass the "AttributeName" as a parameter of the getAttribute method:
    
var position = node.get_attributes().getAttribute("Position");
   }
 </script>
Select a node to see the details for that person.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.ApplicationScenarios.CustomAttributes.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function() {
            demo.position = $get("<%= position.ClientID %>");
            demo.name = $get("<%= name.ClientID %>");
            demo.email = $get("<%= email.ClientID %>");
            demo.phone = $get("<%= phone.ClientID %>");
            demo.room = $get("<%= room.ClientID %>");
        });
        //]]>
    </script>
    <div class="demo-container size-wide">
        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="Server" Width="250px" OnClientNodeClicked="onNodeClicked" Skin="Silk">
            <Nodes>
                <telerik:RadTreeNode Text="Marketing" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Carina Joplin" position="Marketing Director" phone="555-888-201"
                            room="201" email="carina.joplin@example.com" image="2.gif" ImageUrl="images/female1.gif"
                            Selected="true">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Tom Wolfe" position="Marketing Executive" phone="555-888-202"
                            room="202" email="tom.wolfe@example.com" ImageUrl="images/male1.gif">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Sales" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Dashiel Robins" position="Sales Director" phone="555-888-301"
                            room="301" email="dashiel.robins@example.com" ImageUrl="images/male2.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Carla Gillotti" position="Sales Rep" phone="555-888-302"
                            room="302" email="carla.gillotti@example.com" ImageUrl="images/female2.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Jane Adams" position="Sales Rep" phone="555-888-303" room="303"
                            email="jane.adams@example.com" ImageUrl="images/female3.gif">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="R &amp;amp; D" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Giorgio Aressi" position="R &amp;D Director" phone="555-888-401"
                            room="401" email="giorgio.aressi@example.com" ImageUrl="images/male3.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Lydia Kraus" position="R &amp;D Manager" phone="555-888-402"
                            room="402" email="lydia.kraus@example.com" ImageUrl="images/female4.gif">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Development" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="George Malinovsky" position="Chief of Development" phone="555-888-501"
                            room="501" email="george.malinovsky@example.com" ImageUrl="images/male4.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mashona Washington" position="Senior Developer" phone="555-888-502"
                            room="502" email="mashona.washington@example.com" ImageUrl="images/female5.gif">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Design" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Iren Patello" position="Creative Director" phone="555-888-601"
                            room="601" email="irene.patello@example.com" ImageUrl="images/male5.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Nick Angel" position="Senior Print Designer" phone="555-888-602"
                            room="602" email="nick.angel@example.com" ImageUrl="images/male6.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mike Zivin" position="Senior Web Designer" phone="555-888-603"
                            room="603" email="nick.angel@example.com" ImageUrl="images/male7.gif">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
        <div class="details">
            <div class="header">
                Details:
            <asp:Label runat="Server" ID="name"></asp:Label>
            </div>
            <div class="content">
                    Position:
                <asp:Label runat="server" ID="position"></asp:Label>
                    <br />
                    Mobile:
                <asp:Label runat="server" ID="phone"></asp:Label>
                    <br />
                    Email:
                <asp:Label ID="email" runat="server"></asp:Label>
                    <br />
                    Room:
                <asp:Label runat="server" ID="room"></asp:Label>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance