RadDataPager - Telerik ASP.NET DataPager

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




Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 90+ 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?