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   
    B Beverages   
    C Cheese   
    • 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
    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesCSharp.Overview.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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")%><%# IIf(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"></asp:CheckBox>
                        </span>
                        <br />
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox2" runat="server" Text="Show tree lines" Checked="true"
                                AutoPostBack="true"></asp:CheckBox></span><br />
                        <br />
                        <label for="DropDownList1">
                            Change treelist lines:</label>
                        <qsf:ComboBox runat="server" Size="Medium" 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"
                                ></asp:CheckBox></span><br />
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox4" runat="server" Text="Enable sorting" Checked="true"
                                AutoPostBack="true"></asp:CheckBox></span>
                        <br />
                        <br />
                        <label for="RadComboBox1">
                            Expand Collapse Mode:</label>
                        <qsf:ComboBox ID="ComboBox2" runat="server" AutoPostBack="true" Size="Medium">
                            <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"></asp:CheckBox></span><br />
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox6" runat="server" Text="Allow multi-item selection" Checked="false"
                                AutoPostBack="true"></asp:CheckBox></span>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
     
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance