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

    Basic Sorting

    Continent Country City 
    1234
    Page size:
     36 items in 4 pages
    AfricaEgyptCairo
    AfricaSouth AfricaCape Town
    AfricaSouth AfricaPretoria
    AfricaSouth AfricaBloemfontain
    AfricaKenyaNairobi
    AsiaChinaBejing
    AsiaIndiaNew Delhi
    AsiaIndiaBombay
    AsiaIndonesiaJakarta
    AustraliaAustraliaSydney
    • Demo Configurator
    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 AllowSortingproperty to true. Furthermore, to force only two-way sorting (ascending and descending), set the GridTableView.AllowNaturalSort or GridTableView.SortExpressions.AllowNaturalSort property to false.

    Use RadGrid.SortingSettings.SortedBackColor to apply color to all the sorted columns, or GridColumn.SortedBackColor to apply color to the respective column (GridColumn setting overrides 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.

    The R1 2022 SP1 introduces the ability to show a NoSort icon to indicate that an unsorted column can be sorted. It is controlled by the Grid.SortingSettings.ShowNoSortIcons(default value false) and GridColumn.ShowNoSortIcon properties.
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Functionality.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>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container">
            <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" Skin="Silk" EnableRoundedCorners="False" DecorationZoneID="GridZone" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <div id="GridZone">
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true"
                    AllowSorting="True" GridLines="None" Skin="Silk">
                    <SortingSettings ShowNoSortIcons="true" />
                    <MasterTableView AllowMultiColumnSorting="true">
                        <PagerStyle AlwaysVisible="true" />
                    </MasterTableView>
                    <SortingSettings SortedBackColor="#FFF6D6" EnableSkinSortStyles="false"></SortingSettings>
                    <HeaderStyle Width="100px"></HeaderStyle>
                </telerik:RadGrid>
            </div>
            <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>
            <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
                <Views>
                    <qsf:View>
                        <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                            <ul class="fb-group">
                                <li>
                                    <label>
                                        <asp:CheckBox ID="CheckBox4" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox4_CheckedChanged" />
                                        Allow multi-column sorting</label>
                                </li>
                                <li>
                                    <label>
                                        <asp:CheckBox ID="CheckBox2" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" />
                                        Allow natural sort state</label>
                                </li>
                                <li style="margin-top: 16px">
                                    <label>
                                        <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
                                        Default sort order Descending</label></li>
                                <li>
                                    <label>
                                        <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox3_CheckedChanged"></asp:CheckBox>
                                        Apply sorted back color</label></li>
                                <li class="qsf-new custom-position">
                                    <label>
                                        <asp:CheckBox ID="CheckBox5" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox5_CheckedChanged" />
                                        Show NoSort icon on Sortable columns</label>
                                    <style>
                                        .configurator .qsf-new.custom-position:before {
                                            margin-left: 280px
                                        }
                                    </style>
                                </li>
                            </ul>
                        </qsf:ConfiguratorColumn>
                    </qsf:View>
                </Views>
            </qsf:ConfiguratorPanel>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance