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

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();
    }
}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.Templates.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 type="text/css" href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadTreeView RenderMode="Lightweight" 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="images/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="images/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="images/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="images/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>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance