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

    Basic sorting

    Sort expression: CompanyName ASC
    Maria Anders
    Alfreds Futterkiste
    Berlin
    Germany
    030-0074321
    Ana Trujillo
    Ana Trujillo Emparedados y helados
    México D.F.
    Mexico
    (5) 555-4729
    Antonio Moreno
    Antonio Moreno Taquería
    México D.F.
    Mexico
    (5) 555-3932
    Thomas Hardy
    Around the Horn
    London
    UK
    (171) 555-7788
    Christina Berglund
    Berglunds snabbköp
    Luleå
    Sweden
    0921-12 34 65
    Hanna Moos
    Blauer See Delikatessen
    Mannheim
    Germany
    0621-08460
    • Demo Configurator
    Multiple/simple sorting
    Data Fields
    Sort Order
    RadListView for ASP.NET AJAX provides integrated sorting capabilities which can be triggered by:
    • link/push/image buttons residing in the RadListView body when its AllowSorting property is set to true. Their CommandName should be set to 'Sort' and CommandArgument must match the name of the underlying source field to be sorted (for example ContactName for Customers Northwind table).
    • controls outside of the listview body which invoke the FireCommandEvent method of the listview control. Refer to the DataBinding -> Simple vs Advanced binding demo for details on this approach.
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Sorting.BasicSorting.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" type="text/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 no-bg">
            <qsf:MessageBox Type="General" ID="PopulationInfo" runat="server">
                <asp:Label ID="Label1" Text="Sort expression:" runat="server"></asp:Label>
            </qsf:MessageBox>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="Panel1" />
                            <telerik:AjaxUpdatedControl ControlID="Label1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="Panel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1"/>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel>
            <asp:Panel ID="Panel1" runat="server">
                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ItemPlaceholderID="PlaceHolder1"
                    DataSourceID="SqlDataSource1" AllowMultiFieldSorting="true" AllowPaging="true">
                    <ItemTemplate>
                        <div class="itemStyle">
                            <asp:Label ID="CustomerLabel" runat="server" Text='<%# Eval("CustomerID") %>' Visible="false"></asp:Label>
                            <asp:Label CssClass="labelLarge" ID="ContactNameLabel" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                            <div class="labelSmall">
                                <asp:Label ID="CompanyNameLabel" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label><br />
                                <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>'></asp:Label><br />
                                <asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country") %>'></asp:Label><br />
                            </div>
                            <div class="labelPhone">
                                <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>'></asp:Label>
                            </div>
                        </div>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <div class="listLayout">
                            <asp:Panel ID="PlaceHolder1" runat="server">
                            </asp:Panel>
                            <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1" CssClass="dataPager" PageSize="6">
                                <Fields>
                                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"></telerik:RadDataPagerButtonField>
                                    <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="10"></telerik:RadDataPagerButtonField>
                                    <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"></telerik:RadDataPagerButtonField>
                                </Fields>
                            </telerik:RadDataPager>
                        </div>
                    </LayoutTemplate>
                </telerik:RadListView>
            </asp:Panel>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [City], [ContactName], [Country], [Phone] FROM [Customers]"></asp:SqlDataSource>
        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
                <Views>
                    <qsf:View>
                        <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title="Multiple/simple sorting">
                            <qsf:CheckBoxList ID="CheckBox1" runat="server"
                                AutoPostBack="true" OnSelectedIndexChanged="CheckBox1_SelectedIndexChanged">
                                <asp:ListItem Text="Allow multiple sorting" Selected="True"></asp:ListItem>
                            </qsf:CheckBoxList>
                        </qsf:ConfiguratorColumn>
                        <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow" Title="Data Fields">
                            <qsf:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true">
                                <asp:ListItem Text="CompanyName"></asp:ListItem>
                                <asp:ListItem Text="City"></asp:ListItem>
                                <asp:ListItem Text="ContactName"></asp:ListItem>
                                <asp:ListItem Text="Country"></asp:ListItem>
                            </qsf:CheckBoxList>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" Visible="false">
                                <asp:ListItem Text="CompanyName"></asp:ListItem>
                                <asp:ListItem Text="City"></asp:ListItem>
                                <asp:ListItem Text="ContactName"></asp:ListItem>
                                <asp:ListItem Text="Country"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </qsf:ConfiguratorColumn>
                        <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow" Title="Sort Order">
                            <qsf:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList2_SelectedIndexChanged">
                                <asp:ListItem Text="Ascending"></asp:ListItem>
                                <asp:ListItem Text="Descending"></asp:ListItem>
                                <asp:ListItem Text="None"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </qsf:ConfiguratorColumn>
                    </qsf:View>
                </Views>
            </qsf:ConfiguratorPanel>
        </telerik:RadAjaxPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance