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

    Data Paging

    • Name: Tofui
      Quantity: 40 - 100 g pkgs.
      UnitPrice: 23.25 $
      Units: 35
      Available: Yes
    • Name: Carnarvon Tigers
      Quantity: 16 kg pkg.
      UnitPrice: null $
      Units: 100
      Available: No
    • Name: Teatime Chocolate Biscuits
      Quantity: 10 boxes x 12 pieces
      UnitPrice: 9.20 $
      Units: 25
      Available: Yes
    • Name: Sir Rodney's Marmalade
      Quantity: 30 gift boxes
      UnitPrice: 81.00 $
      Units: 40
      Available: Yes
    • Name: Sir Rodney's Scones
      Quantity: 24 pkgs. x 4 pieces
      UnitPrice: 10.00 $
      Units: 3
      Available: Yes
    • Name: Gustaf's Knäckebröd
      Quantity: 24 - 500 g pkgs.
      UnitPrice: 21.00 $
      Units: 104
      Available: Yes
    • Name: Tunnbröd
      Quantity: 12 - 250 g pkgs.
      UnitPrice: 9.00 $
      Units: 61
      Available: Yes
    • Name: Guaraná Fantástica
      Quantity: 12 - 355 ml cans
      UnitPrice: 4.50 $
      Units: 20
      Available: No
    Page 1 of 8 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>
    <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