All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
<%@ 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>