Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

DataPager / First Look

Configurator
Use check boxes bellow to customize the RadDataPager control


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
12345678910...
Page size:
select
Page: of 13
Items 1 to 6 of 77


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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.DataPagerExamplesCSharp.FirstLook.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <style type="text/css">
            .rdpWrap .RadInput, .rdpWrap .rdpPagerButton, .rdpWrap .rdpPagerLabel
            {
                float: left;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS" />
            <!-- content start -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
                Expanded="true">
                Use check boxes bellow to customize the RadDataPager control
    <asp:CheckBoxList runat="server" 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>
                </asp:CheckBoxList>
            </qsf:ConfiguratorPanel>
            <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"
                    AllowSorting="true" DataSourceID="SqlDataSource1" ItemPlaceholderID="ProductsHolder"
                    DataKeyNames="ProductID">
                    <LayoutTemplate>
                        <fieldset style="width: 760px;" id="FieldSet1">
                            <legend>Products</legend>
                            <asp:Panel ID="ProductsHolder" runat="server" />
                            <table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">
                                <tr>
                                    <td>
                                        <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                            PageSize="6">
                                            <Fields>
                                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                                <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                                <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                                <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                                                <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                                    TextBoxWidth="15" />
                                                <telerik:RadDataPagerTemplatePageField>
                                                    <PagerTemplate>
                                                        <div style="float: right">
                                                            <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 style="float: left;">
                            <table cellpadding="0" cellspacing="0" style="width: 230px; 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>
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [Discontinued] FROM [Products]" />
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </div>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451