Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
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.
<%@ 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() != "" ? " (" + 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>