Grid

Controls

SharePoint Web Parts

Editor
Grid
ListView
Scheduler

Support Resources

Integration Examples

Q1 2013 released 04/17/2013
next demo
view source rate / review
get trial buy now
All Controls

Grid

Rate this demo

Thank you for your post!

Grid - Basic Sorting

Example Configuration
   
Continent CountryCity
Data pager
1234
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.

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.
C# VB
Show code in new window Demo isolation steps 
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.GeneralFeatures.Sorting.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>
    <title>AJAX GridView's basic sorting capabilities | RadGrid Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Metro" EnableRoundedCorners="False" DecoratedControls="All" />
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
        <table cellspacing="1" cellpadding="1" border="0">
            <tr>
                <td>
                    <label for="DropDownList1">Allow multi-column sorting:</label>
                </td>
                <td>
                    <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>
                    <label for="DropDownList2">Allow&nbsp;'natural sort' state (after 'descending')&nbsp;</label>
                </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>
                    <label for="CheckBox1">Default sort order Descending</label>
                </td>
                <td>
                    <asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <label for="CheckBox2">Allow custom sorting</label>
                </td>
                <td>
                    <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged">
                    </asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="CheckBox3">Apply sorted back color</label>
                </td>
                <td>
                    <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox3_CheckedChanged">
                    </asp:CheckBox>
                </td>
            </tr>
        </table>
        <asp:Label ID="SortLabel" AssociatedControlID="RadGrid1" runat="server"></asp:Label>
    </qsf:ConfiguratorPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="DropDownList2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="SortLabel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="true" Skin="Metro"
        AllowSorting="True" GridLines="None" OnSortCommand="RadGrid1_SortCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView AllowMultiColumnSorting="true">
        </MasterTableView>
        <SortingSettings SortedBackColor="Azure" 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>

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.

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