All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
RadTreeList supports both single and multi-column sorting. It is possible to sort the RadTreeList items in ascending or descending order or you can leave them unsorted. The latter mode (unsorted) could be disabled by setting the AllowNaturalSort property to false.
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesVBNET.Sorting.BasicSorting.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"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadTreeList1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" /> <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" /> <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <div class="demo-container no-bg"> <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowSorting="True" DataSourceID="SqlDataSource1" DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" AllowPaging="true" PageSize="7" AutoGenerateColumns="false"> <Columns> <telerik:TreeListBoundColumn DataField="LocationID" HeaderText="LocationID"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn DataField="LocationName" HeaderText="Name"> </telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn DataField="Population" HeaderText="Population" DataFormatString="{0:#,#}"> <HeaderStyle HorizontalAlign="Right"></HeaderStyle> <ItemStyle HorizontalAlign="Right"></ItemStyle> </telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn DataField="Area" HeaderText="Area" DataFormatString="{0:#,# km<sup>2</sup>}"> <HeaderStyle HorizontalAlign="Right"></HeaderStyle> <ItemStyle HorizontalAlign="Right"></ItemStyle> </telerik:TreeListBoundColumn> </Columns> </telerik:RadTreeList> </div> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>" SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]"></asp:SqlDataSource> <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server"> <Views> <qsf:View> <qsf:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"> <asp:ListItem Text="Disable 'natural' sort" /> <asp:ListItem Text="Multi-column sorting" /> </qsf:CheckBoxList> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>