Detail Template

Through its DetailTemplate RadTreeList gives you the freedom to create and design one extra row for each treelist item. This additional detail row allows data-binding the controls within it 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 the advantage of this feature, you need to place your custom controls and HTMLinto the RadTreeList DetailTemplate definition. There you can use binding expressions, like Eval and Bind, for the parent fields that will be visualized in the table row rendered.

As the detail item is part of each treelist item, it is visible when its parent item is also visible, and cannot be expanded/collapsed separately. Additionally, if paging is enabled for theRadTreeList control, on the current page will be displayed as many treelist items as the page size is plus their detail items.

The following sample illustrates one possible usage of the detail item feature of RadTreeList:

<telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" DataSourceID="SqlDataSource1"
    AutoGenerateColumns="false" AllowPaging="true" PageSize="5" DataKeyNames="EmployeeID"
    ParentDataKeyNames="ReportsTo">
    <DetailTemplate>
        <table>
            <tr>
                <td>
                    <img src='<%# Page.ResolveUrl("~/TreeList/Examples/Appearance/DetailItemTemplate/Img/") + Eval("EmployeeID") + ".jpg" %>'
                        alt='<%# Eval("FirstName") + " " + Eval("LastName") %>' />
                </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>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" runat="server" SelectCommand="SELECT EmployeeID, LastName, FirstName, Title, ReportsTo, Notes FROM Employees">
</asp:SqlDataSource>

For a live example, check this online demo.