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

    Basic Sorting

    LocationIDNamePopulationArea
    1
    Page size:
    1Asia3,879,000,00043,820,000 km2
    2Africa922,011,00030,370,000 km2
    3North America528,720,58824,490,000 km2
    4South America382,000,00017,840,000 km2
     5Antarctica1,00013,720,000 km2
    6Europe731,000,00010,180,000 km2
    7Australia22,000,0009,008,500 km2
    • Demo Configurator

    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.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.Sorting.BasicSorting.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>
     
    <%@ 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>

    Support & Learning Resources

    Find Assistance