ListView - 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






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.

  • 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 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>
    <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>

Find Assistance

Help Us Improve

Was this example helpful?