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

    Paging and Sorting

    Id First Name Last Name Title Age
    1AndrewSuyamaSales Manager36
    2AnneKingVice President, Sales52
    3MargaretFullerWeb Designer61
    4NancyKingTechnical Support34
    5LauraSuyamaSales Representative56
    6MargaretBuchananInside Sales Coordinator54
    7AnneDodsworthInside Sales Coordinator39
    8MargaretDodsworthChief Execute Officer61
    9NancyPeacockTechnical Support54
    10AnneCallahanInside Sales Coordinator34
    • Demo Configurator
    • of 50
    • Order by:Id
    • Direction:Ascending
    The example demonstrates how you can easily configure and enable paging and sorting with binding to local data in a table element.

    Using the provided Page, Order by and Direction controls in the configuration panel you could:

    • Switch between the different pages of the table;
    • Order the columns by ID, First Name, Last Name, Title and Age fields;
    • Change the direction from Ascending to Descending and vice versa.
    Press the “Apply” button to see the result.

    You can find detailed information about RadClientDataSource paging and sorting in the following help articles:
    RadClientDataSource Server-side Basics
    get_sortExpressions() property

    • DefaultCS.aspx
    • scripts.js
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true"  %>
     
    <%@ 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>
        <script type="text/javascript" src="scripts.js"></script>
        <link href="styles.css" rel="stylesheet" />
    </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" style="max-width:545px">
                <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                    <script type="text/javascript">
                        var dataSource, sortField, sortOrder, inpPage;
                        Sys.Application.add_load(function () {
                            dataSource = $find('<%= RadClientDataSource1.ClientID %>');
                            sortField = $find('<%= sortField.ClientID %>');
                            sortOrder = $find('<%= sortOrder.ClientID %>');
                            inpPage = $find('<%= inpPage.ClientID %>');
                });
                    </script>
                </telerik:RadCodeBlock>
                <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" AllowPaging="true" PageSize="10">
                    <ClientEvents OnChange="dataSourceChange" />
                </telerik:RadClientDataSource>
     
                <div class="wrapper">
                    <table id="people" class="tableStyle">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Title</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
     
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
            <Views>
                <qsf:View>
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox Size="Thin" runat="server" ID="inpPage" Label="Page:" Text="1"></qsf:TextBox>
                            <span class="spanStyle">of 50</span>
                        </li>
                        <li>
                            <qsf:DropDownList Size="Medium" runat="server" Label="Order by:" ID="sortField">
                                <Items>
                                    <telerik:DropDownListItem Value="Id" Text="Id" />
                                    <telerik:DropDownListItem Value="FirstName" Text="First Name" />
                                    <telerik:DropDownListItem Value="LastName" Text="Last Name" />
                                    <telerik:DropDownListItem Value="Title" Text="Title" />
                                    <telerik:DropDownListItem Value="Age" Text="Age" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList Size="Medium" runat="server" Label="Direction:" ID="sortOrder">
                                <Items>
                                    <telerik:DropDownListItem Value="Asc" Text="Ascending" />
                                    <telerik:DropDownListItem Value="Desc" Text="Descending" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li style="margin-top: 25px">
                            <qsf:Button runat="server" ID="Button1" Text="Apply" AutoPostBack="false" OnClientClicked="btnApply_Click"></qsf:Button>
                        </li>
                    </ul>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance