Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Basic Sorting

Example Configuration
True
True
Grid sort expression:
Continent CountryCity
Data pager
Data pager
Page size:
PageSizeComboBox
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.

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.
C# VB
Show code in new window Demo isolation steps
<%@ 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 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">
    <title>AJAX GridView's basic sorting capabilities | RadGrid Demo</title>
    <style type="text/css">
        .qsfConfig table td {
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Silk" EnableRoundedCorners="False" DecoratedControls="All" />
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
        <table cellspacing="1" cellpadding="1" border="0">
            <tr>
                <td>
                    <label>Allow multi-column sorting:</label>
                </td>
                <td>
                    <telerik:RadDropDownList ID="DropDownList1" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                        runat="server">
                        <Items>
                            <telerik:DropDownListItem Text="True" Value="True" Selected="True" />
                            <telerik:DropDownListItem Text="False" Value="False" />
                        </Items>
                    </telerik:RadDropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Allow&nbsp;'natural sort' state (after 'descending')&nbsp;</label>
                </td>
                <td>
                    <telerik:RadDropDownList ID="DropDownList2" AutoPostBack="True" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"
                        runat="server">
                        <Items>
                            <telerik:DropDownListItem Text="True" Value="True" Selected="True" />
                            <telerik:DropDownListItem Text="False" Value="False" />
                        </Items>
                    </telerik:RadDropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Default sort order Descending</label>
                </td>
                <td>
                    <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Apply sorted back color</label>
                </td>
                <td>
                    <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox3_CheckedChanged"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>Grid sort expression:
                </td>
                <td>
                    <asp:Label ID="SortLabel" AssociatedControlID="RadGrid1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </qsf:ConfiguratorPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SortLabel" />
                </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>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true"
        AllowSorting="True" GridLines="None" OnSortCommand="RadGrid1_SortCommand">
        <MasterTableView AllowMultiColumnSorting="true">
            <PagerStyle AlwaysVisible="true" />
        </MasterTableView>
        <SortingSettings SortedBackColor="#FFF6D6" EnableSkinSortStyles="false"></SortingSettings>
        <HeaderStyle Width="100px"></HeaderStyle>
    </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>
    </form>
</body>
</html>