Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Basic Sorting

Example Configuration
RadGrid Sorting feature configurator
Allow multi-column sorting:
Allow 'natural sort' state (after 'descending') 
Default sort order Descending
   
Allow custom sorting
Apply sorted back color
Continent CountryCity
1234
Page size:
select
 36 items in 4 pages
AfricaEgyptCairo
AfricaSouth AfricaCape Town
AfricaSouth AfricaPretoria
AfricaSouth AfricaBloemfontain
AfricaKenyaNairobi
AsiaChinaBejing
AsiaIndiaNew Delhi
AsiaIndiaBombay
AsiaIndonesiaJakarta
AustraliaAustraliaSydney

  • The demo represents the sorting capabilities of Telerik RadGrid. Three sorting directions are supported: Ascending, Descending and Default (no sorting), which can be changed by clicking on the column header text. The sorting functionality can be enabled by setting the AllowSorting property to true. Furthermore, to force only two-way sorting (ascending and descending), set the GridTableView.AllowNaturalSort or GridTableView.SortExpressions.AllowNaturalSort property to false.

    Since v5.0 RadGrid provides the ability to colorize the sorted column. Use RadGrid.SortingSettings.SortedBackColor to apply color to all the sorted columns, or GridColumn.SortedBackColor to apply color to the respective column (GridColumn setting ovverides the SortedBackColor from SortingSettings).

    Telerik RadGrid also supports Multi-Column Sorting and Sorting Expressions, which are demonstrated in more details in the Advanced sorting example in this section.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" Inherits="Telerik.GridExamplesVBNET.GeneralFeatures.Sorting.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
             <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
           <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <telerik:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">

                    <div class="title">
                        RadGrid Sorting feature configurator</div>
                    <table cellspacing="1" cellpadding="1" border="0">
                        <tr>
                            <td style="height: 15px">
                                Allow multi-column sorting:</td>
                            <td style="height: 15px">
    <asp:DropDownList ID="DropDownList1" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
    runat="server">
                                    <asp:ListItem Value="True" Selected="True">True</asp:ListItem>
                                    <asp:ListItem Value="False">False</asp:ListItem>
                                </asp:DropDownList></td>
                        </tr>
                        <tr>
                            <td>
                                Allow&nbsp;'natural sort' state (after 'descending')&nbsp;</td>
                            <td>
    <asp:DropDownList ID="DropDownList2" AutoPostBack="True" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"
    runat="server">
                                    <asp:ListItem Value="True" Selected="True">True</asp:ListItem>
                                    <asp:ListItem Value="False">False</asp:ListItem>
                                </asp:DropDownList></td>
                        </tr>
                        <tr>
                            <td>
                                Default sort order Descending</td>
                            <td>
                                <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox></td>
                        </tr>
                        <tr>
                            <td style="height: 21px">
                                &nbsp;</td>
                            <td style="height: 21px">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                Allow custom sorting</td>
                            <td>
                                <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" /></td>
                        </tr>
                        <tr>
                            <td>
                                Apply sorted back color</td>
                            <td>
                                <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox3_CheckedChanged">
                                </asp:CheckBox></td>
                        </tr>
                    </table>
                    <asp:Label ID="SortLabel" runat="server"></asp:Label>
                </telerik:ConfiguratorPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="DropDownList1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="DropDownList2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="SortLabel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox3">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true" AllowSorting="True"
                GridLines="None" OnSortCommand="RadGrid1_SortCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
                <MasterTableView AllowMultiColumnSorting="true" />
                <SortingSettings SortedBackColor="Azure" EnableSkinSortStyles="false" />
                <HeaderStyle Width="100px" />
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                SelectCommand="SELECT Continents.Name AS Continent, Countries.Name AS Country, Cities.Name AS City FROM Cities INNER JOIN Countries ON Cities.CountryID = Countries.ID INNER JOIN Continents ON Continents.ID = Countries.ContinentID" runat="server"></asp:SqlDataSource>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451