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

Paging with RadDataPager

Products
Name: Carnarvon Tigers
Quantity: 16 kg pkg.
Price:
Units: 100
Available: No
Name: Teatime Chocolate Biscuits
Quantity: 10 boxes x 12 pieces
Price: $9.20
Units: 25
Available: Yes
Name: Sir Rodney's Marmalade
Quantity: 30 gift boxes
Price: $81.00
Units: 40
Available: Yes
Name: Sir Rodney's Scones
Quantity: 24 pkgs. x 4 pieces
Price: $10.00
Units: 3
Available: Yes
Name: Gustaf's Knäckebröd
Quantity: 24 - 500 g pkgs.
Price: $21.00
Units: 104
Available: Yes
Name: Tunnbröd
Quantity: 12 - 250 g pkgs.
Price: $9.00
Units: 61
Available: Yes
12345...
Page size:
Page:
of 11
Items 1 to 6 of 61

  • Configurator

Use check boxes bellow to customize the RadDataPager control



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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.ListViewExamplesVBNET.Paging.PagingWithRadDataPager.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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 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="<%# IIF(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">
                                    <%#IIf(Not CType(DataBinder.Eval(Container.DataItem, "Discontinued"), Boolean), "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" Title="Configurator"
        Expanded="true">
        <Views>
            <qsf:View>
                <qsf:CheckBoxList runat="server" Label="Use check boxes bellow to customize the RadDataPager control" ID="CheckBoxList1" AutoPostBack="true" RepeatColumns="2"
                    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