Grid - Basic Sorting

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

Demo Configurator

Isolate this demo as a stand-alone application
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.
<%@ 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>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" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Silk" EnableRoundedCorners="False" DecoratedControls="CheckBoxes" />
    <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>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true"
        AllowSorting="True" GridLines="None" OnSortCommand="RadGrid1_SortCommand" Skin="Silk">
        <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>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="CheckBox4" runat="server" Checked="true"  AutoPostBack="true" OnCheckedChanged="CheckBox4_CheckedChanged"/>
                            <label>Allow multi-column sorting</label>
                        </li>
                        <li>
                            <asp:CheckBox ID="CheckBox2" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" />
                            <label>Allow natural sort state</label>
                        </li>
                        <li style="margin-top: 16px">
                            <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
                            <label>Default sort order Descending</label></li>
                        <li>
                            <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox3_CheckedChanged"></asp:CheckBox>
                            <label>Apply sorted back color</label></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?