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

Paging with RadDataPager

Products
Name: Chai
Quantity: 10 boxes x 20 bags
Price: $18.00
Units: 39
Available: Yes


Name: Chang
Quantity: 24 - 12 oz bottles
Price: $19.00
Units: 17
Available: Yes


Name: Aniseed Syrup
Quantity: 12 - 550 ml bottles
Price: $10.00
Units: 13
Available: Yes


Name: Chef Anton's Cajun Seasoning
Quantity: 48 - 6 oz jars
Price: $22.00
Units: 53
Available: Yes


Name: Chef Anton's Gumbo Mix
Quantity: 36 boxes
Price: $21.35
Units: 0
Available: No


Name: Grandma's Boysenberry Spread
Quantity: 12 - 8 oz jars
Price: $25.00
Units: 120
Available: Yes


Page size:
Page:
of 13
Items 1 to 6 of 77

  • Demo Configurator

The RadListView supports native paging and RadDataPager as external control to provide paging features. If you need a RadDataPager control to be used for navigating through a RadListView control data, you must set the PagedControlID property of RadDataPager to the ID of the RadListView control and the AllowPaging property of the listview to True. The size of the pages of data is set by using the PageSize property of the RadDataPager control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Paging.PagingWithRadDataPager.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="demo-container" />
    <div class="demo-container" id="demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBoxList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="CheckBoxList1" />
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0" />
        <asp:Panel ID="ListViewPanel1" runat="server">
            <telerik:RadListView ID="RadListView1" Width="97%" AllowPaging="True" runat="server" RenderMode="Lightweight"
                AllowSorting="true" DataSourceID="SqlDataSource1" ItemPlaceholderID="ProductsHolder"
                DataKeyNames="ProductID">
                <LayoutTemplate>
                    <fieldset id="FieldSet1" class="productsFieldset">
                        <legend>Products</legend>
                        <asp:Panel ID="ProductsHolder" runat="server" />
                        <table class="demoTable">
                            <tr>
                                <td>
                                    <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                        PageSize="6">
                                        <Fields>
                                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                            <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />
                                            <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                            <telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: " />
                                            <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" />
                                            <telerik:RadDataPagerTemplatePageField>
                                                <PagerTemplate>
                                                    <div class="pager">
                                                        <b>Items
                                                        <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                            to
                                                        <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
                                                            of
                                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                                            <br />
                                                        </b>
                                                    </div>
                                                </PagerTemplate>
                                            </telerik:RadDataPagerTemplatePageField>
                                        </Fields>
                                    </telerik:RadDataPager>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="itemWrapper">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">Name:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("ProductName") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Quantity:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("QuantityPerUnit") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Price:
                                </td>
                                <td class="cellInfo">
                                    <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:C}") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Units:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("UnitsInStock") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Available:
                                </td>
                                <td class="cellInfo">
                                    <%# ((bool)DataBinder.Eval(Container.DataItem,"Discontinued") == false ? "Yes" : "No") %>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <hr />
                                </td>
                                <td>
                                    <hr />
                                </td>
                            </tr>
                        </table>
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
        </asp:Panel>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [Discontinued] FROM [Products]" />
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:CheckBoxList runat="server" ID="CheckBoxList1" AutoPostBack="true"
                    RepeatDirection="Vertical" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
                    RepeatLayout="Table" CellSpacing="10">
                    <asp:ListItem Value="1" Text="FirstPrev button fields" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Numeric button fields" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="3" Text="NextLast button fields" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="4" Text="Page size field" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="5" Text="Go-to-page field" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="6" Text="Template field" Selected="True"></asp:ListItem>
                </qsf:CheckBoxList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance