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

WebForms TreeList Overview

Category IDProductPriceIn stockParent Category ID
12
Page size:
A Appetizers   
  A1 Southwestern Twisted Chips (150 gr.) $6.79A
  A2 Top Shelf Combo Appetizer (300 gr.) $9.49A
B Beverages   
  B1 Sangria (90 ml.) $6.49B
  B2 Margarita (60 ml.) $7.39B
  B3 Red Cherry Boost (200 ml.) $6.99B
  B4 Mojito (180 ml.) $7.59B
C Cheese   
  C1 Blue Cheese and Hazelnut Shortbread (220 gr.) $10.69C
  • Demo Configurator
Visual Options



TreeList Options



Selection Options

This demo demonstrates RadTreeList paging, sorting and client-side selection functionalities as well as multi-item selection. You can also change the treelist appearance using ShowOuterBorders, ShowTreeLines and GridLines properties.

About RadTreeList for ASP.NET AJAX

The Telerik AJAX TreeList control is the perfect fit for scenarios in which you will need to combine treeview and grid in one control. Its hybrid structure empowers you with the ability to visualize self-referencing data in a hierarchical view defining primary/foreign key relations and using identical objects for source. The treelist benefits both from a treeview's expand/collapse and items aligning capabilities as well as from typical grid's features like sorting, paging, row selection, etc.

RadTreeList and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Various column types
  • Codeless data-binding using the DataSourceControls.
  • Data-Binding to various data sources which implement the IEnumerable, IList or ICustomTypeDescriptor interfaces.
  • Integrated paging, sorting and selecting.
  • Easily customizable skinning mechanism (setting single Skin property of the treelist).
  • The ShowOuterBorders, ShowTreeLines and GridLines properties allow you to quickly change the appearance.
  • Interoperability with RadAjax and loading indicators.
  • The expanded and the selected state of the items is persisted while navigating through pages
More about TreeList for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
    <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
        ParentDataKeyNames="ParentID" DataKeyNames="ID" AllowPaging="true"
        AutoGenerateColumns="false" AllowSorting="true" ExpandCollapseMode="Client">
        <ClientSettings>
            <Selecting AllowItemSelection="true" />
        </ClientSettings>
        <Columns>
            <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" HeaderText="Category ID">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListTemplateColumn DataField="ProductName" UniqueName="ProductName"
                HeaderText="Product">
                <ItemTemplate>
                    <%# Eval("ProductName")%><%# Eval("Quantity").ToString() != "" ? "&nbsp;(" + Eval("Quantity").ToString() + ")" : ""%>
                </ItemTemplate>
            </telerik:TreeListTemplateColumn>
            <telerik:TreeListBoundColumn DataField="Price" UniqueName="Price" DataFormatString="{0:C2}"
                HeaderText="Price" DataType="System.Decimal">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListCheckBoxColumn DataField="InStock" UniqueName="InStock" HeaderText="In stock">
            </telerik:TreeListCheckBoxColumn>
            <telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" HeaderText="Parent Category ID">
            </telerik:TreeListBoundColumn>
        </Columns>
    </telerik:RadTreeList>
        </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <fieldset>
                        <legend>Visual Options</legend>
                    </fieldset>
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox1" runat="server" Text="Show outer borders" Checked="true"
                            AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                    </span>
                    <br />
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="Show tree lines" Checked="true"
                            AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox></span><br />
                    <br />
                    <label for="DropDownList1">
                        Change treelist lines:</label>
                    <qsf:ComboBox runat="server" Size="Medium" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged" ID="ComboBox1" AutoPostBack="true">
                        <Items>
                            <telerik:RadComboBoxItem Selected="True" Text="Both" Value="Both" />
                            <telerik:RadComboBoxItem Text="Horizontal" Value="Horizontal"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="None" Value="None"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Vertical" Value="Vertical"></telerik:RadComboBoxItem>
                        </Items>
                    </qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <fieldset>
                        <legend>TreeList Options</legend>
                    </fieldset>
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox3" runat="server" Text="Enable paging" Checked="true" AutoPostBack="true"
                            OnCheckedChanged="CheckBox3_CheckedChanged"></asp:CheckBox></span><br />
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox4" runat="server" Text="Enable sorting" Checked="true"
                            AutoPostBack="true" OnCheckedChanged="CheckBox4_CheckedChanged"></asp:CheckBox></span>
                    <br />
                    <br />
                    <label for="RadComboBox1">
                        Expand Collapse Mode:</label>
                    <qsf:ComboBox ID="ComboBox2" runat="server" AutoPostBack="true" Size="Medium"
                        OnSelectedIndexChanged="ComboBox2_SelectedIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Text="Client" Value="Client" Selected="True"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Server" Value="Server"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Combined" Value="Combined"></telerik:RadComboBoxItem>
                        </Items>
                    </qsf:ComboBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Wide">
                    <fieldset>
                        <legend>Selection Options</legend>
                    </fieldset>
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox5" runat="server" Text="Enable client-side items selection"
                            Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox5_CheckedChanged"></asp:CheckBox></span><br />
                    <span class="checkbox">
                        <asp:CheckBox ID="CheckBox6" runat="server" Text="Allow multi-item selection" Checked="false"
                            AutoPostBack="true" OnCheckedChanged="CheckBox6_CheckedChanged"></asp:CheckBox></span>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance