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

Data Paging

Page of Page size:

ODataSource is a client data source component that allows querying local and remote services that expose OData feed. It features design-time wizard for visual configuration of the data model for the data, which should be obtained from the service.

This demo demonstrates the paging capabilities of OData and RadODataDataSource. In order to use paging one must set the PageSize property of the DataModel object. Then, on the client RadODataDataSource will automatically fetch the first page. From then, one can implement paging using the Api.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="ODataDataSource.Examples.Functionality.Paging.DefaultCS"%>

<%@ 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 rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container">
        <telerik:RadListView ID="RadListView1" runat="server" Skin="Silk">
            <LayoutTemplate>
                <div id="layoutContainer">
                    <ul class="qsf-ex-item-container" id="itemContainer">
                        <li><!-- This item will be replaced with the templates --></li>
                    </ul>
                    <div class="qsf-ex-paging">
                        <input type="button" id="FirstPageButton" value="First Page" onclick="FirstPageClientClicked()"
                            disabled="disabled" />
                        <input type="button" id="PreviousButton" value="Previous Page" onclick="PrevClientClicked()"
                            disabled="disabled" />
                            Page <span id="currentPage"></span> of <span id="totalPages"></span>
                        <input type="button" id="NextButton" value="Next Page" onclick="NextClientClicked()" />
                        <input type="button" id="LastPageButton" value="Last Page" onclick="LastPageClientClicked()" />
                        <span id="pageSizeSpan">Page size:</span>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="cmbPageSize" Width="50"
                            OnClientSelectedIndexChanged="cmbPageSize_SelectedIndexChanged" Skin="Silk">
                            <Items>
                                <telerik:RadComboBoxItem Text="8" Value="8" />
                                <telerik:RadComboBoxItem Text="12" Value="12" />
                                <telerik:RadComboBoxItem Text="16" Value="16" />
                                <telerik:RadComboBoxItem Text="20" Value="20" />
                            </Items>
                        </telerik:RadComboBox>
                    </div>
                </div>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding ItemPlaceHolderID="itemContainer">
                    <ItemTemplate>
                            <li>
                                <div class="item-inner">
                                    <table cellpadding="0" cellspacing="0">
                                        <colgroup>
                                            <col width="20%" />
                                            <col width="80%" />
                                        </colgroup>
                                        <tbody>
                                            <tr>
                                                <th>Name:</th>
                                                <td>#=ProductName #</td>
                                            </tr>
                                            <tr>
                                                <th>Quantity:</th>
                                                <td>#=QuantityPerUnit #</td>
                                            </tr>
                                            <tr>
                                                <th>UnitPrice:</th>
                                                <td>#=UnitPrice # $</td>
                                            </tr>
                                            <tr>
                                                <th>Units:</th>
                                                <td>#= UnitsInStock #</td>
                                            </tr>
                                            <tr>
                                                <th>Available:</th>
                                                <td>#= Discontinued == false ? "Yes" : "No" #</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </li> 
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
    </div>
    <telerik:RadODataDataSource ID="RadODataDataSource1" runat="server" EnablePaging="true">
        <Schema>
            <telerik:DataModel ModelID="Product" Set="Products" PageIndex="0"
                PageSize="8" />
        </Schema>
        <ClientEvents RequestSucceeded="requestSucceeded" />
    </telerik:RadODataDataSource>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.layoutContainer = $get("layoutContainer");
                demo.oDataDataSource = $find("<%=RadODataDataSource1.ClientID%>");
                demo.listview = $find("<%=RadListView1.ClientID%>");
                demo.firstPageButton = $telerik.findElement(layoutContainer, "FirstPageButton");
                demo.lastPageButton = $telerik.findElement(layoutContainer, "LastPageButton");
                demo.previousButton = $telerik.findElement(layoutContainer, "PreviousButton");
                demo.nextButton = $telerik.findElement(layoutContainer, "NextButton");
                demo.model = demo.oDataDataSource.get_model("Product");
                

                demo.oDataDataSource.fetch("Product");
            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance