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

Paging and Sorting

Id First Name Last Name Title Age
  • 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