Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TreeView / Templates

  • The Greatest Rock Albums
    • Rolling Stones Sticky Fingers
      • Sticky Fingers This was the first album recorded on the Rolling Stones' own label, the first in which Mick Taylor played guitar on all the tracks, and only the fourth to be released worldwide.
    • Led Zeppelin Led Zeppelin IV
    • Jimi Hendrix Electric Ladyland
    • The Beatles Revolver

  • RadTreeView fully supports templates. You can embed any content inside a RadTreeView template:
    • HTML markup
    • ASP.NET server controls
    • Third-party controls (other Telerik controls as well)

    You can define two types of RadTreeView templates:

    1. Global Templates - template that is automatically applied to all tree-nodes:
    <telerik:RadTreeView ID="RadTreeView1" runat="server">
    
           <NodeTemplate>
                  ... 
            </NodeTemplate>
        </telerik:RadTreeView>
    2. Per-node template - template that overrides the global template on a node basis.
    <telerik:RadTreeView ID="RadTreeView1" runat="server">
    
            <telerik:RadTreeNode Text="Node">
                <NodeTemplate>
                       ...
                <NodeTemplate>
            </telerik:RadTreeNode>
         </telerik:RadTreeView>

    This example shows the usage of per-node templates.

    Please note that the RadTreeView should be bound to use the DataBinder.Eval expressions in the templates:

    protected void Page_Load(object sender, System.EventArgs e)
    {
         if (!Page.IsPostBack)
        {   
             RadTreeView1.DataBind(); 
        }
    }

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

    <%@ Page AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.TreeView.Templates.DefaultVB"
        Language="vb" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <link type="text/css" href="styles.css" rel="stylesheet" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm">
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="false"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            </telerik:RadScriptManager>
            <telerik:RadTreeView runat="server" ID="RadTreeView1" Skin="Outlook">
                <Nodes>
                    <telerik:RadTreeNode Text="The Greatest Rock Albums" Expanded="true" CssClass="root-node">
                        <Nodes>
                            <telerik:RadTreeNode Text="Rolling Stones" Expanded="true">
                                <NodeTemplate>
                                    <div class="node-album">
                                        <span class="band">
                                            <%# DataBinder.Eval(Container, "Text") %>
                                        </span><span class="album">Sticky Fingers</span>
                                    </div>
                                </NodeTemplate>
                                <Nodes>
                                    <telerik:RadTreeNode Text="Sticky Fingers">
                                        <NodeTemplate>
                                            <div class="node-album-data">
                                                <img src="Img/sticky.png" alt="" width="73" height="74" />
                                                <span class="album">
                                                    <%# DataBinder.Eval(Container, "Text") %>
                                                </span><span class="details">This was the first album recorded on the Rolling Stones'
                                                    own label, the first in which Mick Taylor played guitar on all the tracks, and only
                                                    the fourth to be released worldwide.</span>
                                            </div>
                                        </NodeTemplate>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Led Zeppelin">
                                <NodeTemplate>
                                    <div class="node-album">
                                        <span class="band">
                                            <%# DataBinder.Eval(Container, "Text") %>
                                        </span><span class="album">Led Zeppelin IV</span>
                                    </div>
                                </NodeTemplate>
                                <Nodes>
                                    <telerik:RadTreeNode Text="Led Zeppelin IV">
                                        <NodeTemplate>
                                            <div class="node-album-data">
                                                <img alt="" height="74" src="Img/led.png" width="73" />
                                                <span class="album">
                                                    <%# DataBinder.Eval(Container, "Text") %>
                                                </span><span class="details">Led Zeppelin's fourth album actually has no title that
                                                    can be pronounced or reproduced with alphanumeric characters, consisting instead
                                                    of a series of hand drawn symbols.</span>
                                            </div>
                                        </NodeTemplate>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Jimi Hendrix">
                                <NodeTemplate>
                                    <div class="node-album">
                                        <span class="band">
                                            <%# DataBinder.Eval(Container, "Text") %>
                                        </span><span class="album">Electric Ladyland</span>
                                    </div>
                                </NodeTemplate>
                                <Nodes>
                                    <telerik:RadTreeNode Text="Electric Ladyland">
                                        <NodeTemplate>
                                            <div class="node-album-data">
                                                <img alt="" height="74" src="Img/hendrix.png" width="73" />
                                                <span class="album">
                                                    <%# DataBinder.Eval(Container, "Text") %>
                                                </span><span class="details">This was the legendary rock guitarist's only #1 album,
                                                    and contains samples of his stylistic range, from blues to '50s rock to psychedelia.
                                                </span>
                                            </div>
                                        </NodeTemplate>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The Beatles">
                                <NodeTemplate>
                                    <div class="node-album">
                                        <span class="band">
                                            <%# DataBinder.Eval(Container, "Text") %>
                                        </span><span class="album">Revolver</span>
                                    </div>
                                </NodeTemplate>
                                <Nodes>
                                    <telerik:RadTreeNode Text="Revolver">
                                        <NodeTemplate>
                                            <div class="node-album-data">
                                                <img alt="" height="74" src="Img/beatles.png" width="73" />
                                                <span class="album">
                                                    <%# DataBinder.Eval(Container, "Text") %>
                                                </span><span class="details">This was the 13th of the 20 albums released in the United
                                                    States by The Beatles. It was released in August 1966, roughly in the middle of
                                                    the band's ten-year life. </span>
                                            </div>
                                        </NodeTemplate>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451