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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<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