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

WebForms DataPager Overview

Products
Name: Queso Cabrales
Quantity: 1 kg pkg.
Price: $21.00
Units: 22
Available: Yes
Name: Queso Manchego La Pastora
Quantity: 10 - 500 g pkgs.
Price: $38.00
Units: 86
Available: Yes
Name: Konbu
Quantity: 2 kg box
Price: $6.00
Units: 24
Available: Yes
Name: Tofu
Quantity: 40 - 100 g pkgs.
Price: $23.25
Units: 35
Available: Yes
Name: Genen Shouyu
Quantity: 24 - 250 ml bottles
Price: $15.50
Units: 39
Available: Yes
Name: Pavlova
Quantity: 32 - 500 g boxes
Price: $17.45
Units: 29
Available: Yes
12345678910...
Page size:
Page:
of 12
Items 1 to 6 of 68
  • 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.

About RadDataPager for ASP.NET AJAX

RadDataPager lets you display large sets of data in small chunks for faster loading and easier navigation. It also provides a set of events, helper methods and properties for custom intervention. The control exposes various built-in pager fields (numeric, next/prev, first/last, change page size, go to page, template) that can be combined to attain pager presentation and functionality in par with every taste. Furthermore, with its SEO paging capabilities the control also gets you better results on search engines. All these combined, make RadDataPager a customizable, easy to use and efficient part of your web site.

RadDataPager and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Built-in SEO paging capabilities
  • Customizable Layout - RadDataPager exposes different fields for designing your pager control.
  • Integration with other controls
  • Easy to localize - RadDataPager can be easily localized through Global Resource files
  • Advanced Skinning - The visual appearance of the Button control can be easily customized through skins
  • Rich client-side functionality

More about DataPager for ASP.NET AJAX

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.DataPagerExamplesCSharp.Overview.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>
    <style type="text/css">
        legend
        {
            color: inherit;
        }

        fieldset
        {
            padding: 5px 10px 10px 10px;
            border-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <div>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="CheckBoxList1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="CheckBoxList1"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="CheckBoxList2">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="CheckBoxList2"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="CheckBoxList3">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="CheckBoxList3"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0">
                </telerik:RadAjaxLoadingPanel>
                <asp:Panel ID="ListViewPanel1" runat="server">
                    <telerik:RadListView ID="RadListView1" Width="97%" AllowPaging="True" runat="server"
                        allowsorting="true" DataSourceID="SqlDataSource1" ItemPlaceholderID="ProductsHolder"
                        DataKeyNames="ProductID">
                        <LayoutTemplate>
                            <fieldset style="max-width: 1100px" id="FieldSet1">
                                <legend>Products</legend>
                                <asp:Panel ID="ProductsHolder" runat="server">
                                </asp:Panel>
                                <table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">
                                    <tr>
                                        <td>
                                            <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                                PageSize="6">
                                                <Fields>
                                                    <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                                    <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                                    <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                                    <telerik:RadDataPagerPageSizeField PageSizeText="Page size: "></telerik:RadDataPagerPageSizeField>
                                                    <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                                        TextBoxWidth="30"></telerik:RadDataPagerGoToPageField>
                                                    <telerik:RadDataPagerTemplatePageField>
                                                        <PagerTemplate>
                                                            <div style="float: right; line-height: 34px; margin-left: 10px;">
                                                                Items
                                                        <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>"></asp:Label>
                                                                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 %>"></asp:Label>
                                                                of
                                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>"></asp:Label>
                                                                <br />
                                                            </div>
                                                        </PagerTemplate>
                                                    </telerik:RadDataPagerTemplatePageField>
                                                </Fields>
                                            </telerik:RadDataPager>
                                        </td>
                                    </tr>
                                </table>
                            </fieldset>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <div style="float: left;">
                                <table cellpadding="0" cellspacing="0" style="width: 300px; height: 100px">
                                    <tr>
                                        <td style="width: 20%;">Name:
                                        </td>
                                        <td style="width: 80%; padding-left: 5px;">
                                            <%# Eval("ProductName") %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Quantity:
                                        </td>
                                        <td style="width: 80%; padding-left: 5px;">
                                            <%# Eval("QuantityPerUnit") %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Price:
                                        </td>
                                        <td style="width: 80%; padding-left: 5px;">
                                            <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:C}") %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Units:
                                        </td>
                                        <td style="width: 80%; padding-left: 5px;">
                                            <%# Eval("UnitsInStock") %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Available:
                                        </td>
                                        <td style="width: 80%; padding-left: 5px;">
                                            <%# ((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>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [Discontinued] FROM [Products]"></asp:SqlDataSource>
            </div>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group checkbox-list">
                        <qsf:CheckBoxList runat="server" ID="CheckBoxList1" AutoPostBack="true"
                            Orientation="Vertical"
                            OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
                            RepeatLayout="UnorderedList" CellSpacing="10">
                            <asp:ListItem Value="1" Text="FirstPrev button fields" Selected="True"></asp:ListItem>
                            <asp:ListItem Value="3" Text="NextLast button fields" Selected="True"></asp:ListItem>
                        </qsf:CheckBoxList>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group checkbox-list">
                        <qsf:CheckBoxList runat="server" ID="CheckBoxList2" AutoPostBack="true"
                            Orientation="Vertical"
                            OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
                            RepeatLayout="UnorderedList" CellSpacing="10">
                            <asp:ListItem Value="2" Text="Numeric button fields" Selected="True"></asp:ListItem>
                            <asp:ListItem Value="4" Text="Page size field" Selected="True"></asp:ListItem>
                        </qsf:CheckBoxList>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group checkbox-list">
                        <qsf:CheckBoxList runat="server" ID="CheckBoxList3" AutoPostBack="true"
                            Orientation="Vertical"
                            OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
                            RepeatLayout="UnorderedList" CellSpacing="10">
                            <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>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance