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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.GridExamplesCSharp.Functionality.Sorting.BasicSorting.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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