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

Detail Template

EmployeeIDLast NameFirst NameTitleReportsTo
2FullerAndrewVice President, Sales 
  
Employee Image Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.

Through its DetailTemplate property RadTreeList gives you the freedom to create and design one extra row for each tree-list item. This additional detail row allows for data-binding the controls within to the data fields of its parent. Thus, based on your custom preferences you can model the look and feel of the detail item in a non-table-dependant format while at the same time filling it with content related to the parent row.

In order to take avail of this feature of RadTreeList's all you need to do is define your controls and custom HTML within the DetailTemplate template property and use ASP.NET binding expressions (Eval or Bind) for the parent fields that will be visualized in the table row rendered.

Related Resources

RadTreeList's DetailTemplate

  • DefaultCS.aspx
<%@ Page 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" CssClass="demo-container no-bg" runat="server">
        <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo">
            <DetailTemplate>
                <table>
                    <tr>
                        <td>
                            <img src='<%# Page.ResolveUrl("~/TreeList/Examples/Appearance/DetailItemTemplate/images/") + Eval("EmployeeID")  %>.jpg' alt="Employee Image"/>
                        </td>
                        <td>
                            <asp:Label ID="lblNotes" runat="server" Text='<%# Eval("Notes") %>'></asp:Label>
                        </td>
                    </tr>
                </table>
            </DetailTemplate>
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" UniqueName="EmployeeID">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" UniqueName="ReportsTo">
                </telerik:TreeListBoundColumn>
            </Columns>
        </telerik:RadTreeList>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, LastName, FirstName, Title, ReportsTo, Notes FROM Employees" runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance