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

Custom sorting

Contact
Maria Anders
Alfreds Futterkiste
Contact
Ana Trujillo
Ana Trujillo Emparedados y helados
Contact
Antonio Moreno
Antonio Moreno Taquería
Contact
Thomas Hardy
Around the Horn
Contact
Christina Berglund
Berglunds snabbköp
Contact
Hanna Moos
Blauer See Delikatessen
Contact
Frédérique Citeaux
Blondesddsl père et fils
Contact
Martín Sommer
Bólido Comidas preparadas



  • Demo Configurator

Sort order


This demo highlights how to achieve a custom sorting functionality with RadListView:

  • By default the sort order is set to Ascending. Use the Configurator panel at the top to switch between Ascending/Descending.
  • Click Sort by name to sort the list by ContactName
  • Click Sort by length to sort the list by the character count of the ContactName field
  • To return to initial state, please click the Clear button
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.ListViewExamplesVBNET.Sorting.CustomSorting.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">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight"  ItemPlaceholderID="PlaceHolder1"
                AllowCustomSorting="true" AllowMultiFieldSorting="true" AllowPaging="true" OnNeedDataSource="RadListView1_NeedDataSource"
                OnSorting="RadListView1_Sorting">
                <ItemTemplate>
                    <div>
                        <div class="contactImage">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/contact.png"
                                AlternateText="Contact"></asp:Image>
                        </div>
                        <div>
                            <div class="contactItemBig">
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("ContactName") %>'></asp:Label>
                            </div>
                            <div class="contactItemSmall">
                                <asp:Label ID="Label2" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
                <LayoutTemplate>
                    <table class="tableBack">
                        <tr>
                            <td class="sortButton">
                                <asp:ImageButton ID="SortByName" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/sortName.png"
                                    CommandName="Sort" CommandArgument="ByName" ToolTip="Click here to sort by ContactName"></asp:ImageButton>
                                <asp:ImageButton ID="SortByLength" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/sortLength.png"
                                    CommandName="Sort" CommandArgument="ByLength" ToolTip="Click here to sort by the length of ContactName field"></asp:ImageButton>
                                <asp:ImageButton ID="ClearSortOrder" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/sortClear.png"
                                    CommandName="Sort" CommandArgument="Clear" ToolTip="Click here to remove sorting"></asp:ImageButton>
                            </td>
                        </tr>
                        <tr>
                            <td class="contact">
                                <asp:Panel ID="PlaceHolder1" runat="server">
                                </asp:Panel>
                            </td>
                            <td class="pagerButton">
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                    PageSize="8" Width="50px" Skin="">
                                    <Fields>
                                        <telerik:RadDataPagerTemplatePageField>
                                            <PagerTemplate>
                                                <div class="pagerButtonWrapper">
                                                    <asp:ImageButton ID="topButton" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/top.png"
                                                        CommandName="Page" CommandArgument="First"></asp:ImageButton>
                                                    <br />
                                                    <asp:ImageButton ID="upButton" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/up.png"
                                                        CommandName="Page" CommandArgument="Prev"></asp:ImageButton>
                                                    <br />
                                                    <asp:ImageButton ID="downButton" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/down.png"
                                                        CommandName="Page" CommandArgument="Next"></asp:ImageButton>
                                                    <br />
                                                    <asp:ImageButton ID="bottomButton" runat="server" ImageUrl="~/ListView/Examples/Sorting/CustomSorting/images/bottom.png"
                                                        CommandName="Page" CommandArgument="Last"></asp:ImageButton>
                                                </div>
                                            </PagerTemplate>
                                        </telerik:RadDataPagerTemplatePageField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="SortOrderRadioButtonList" Label="Sort order" runat="server">
                    <asp:ListItem Text="Ascending" Selected="True">
                    </asp:ListItem>
                    <asp:ListItem Text="Descending">
                    </asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance