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

RadDataPager vs DataPager

ProductID ProductName QuantityPerUnit UnitPrice UnitsInStock
First Previous 1 2 3 4 5  ... Next Last 
14 Tofu 40 - 100 g pkgs. 23.25 35
15 Genen Shouyu 24 - 250 ml bottles 15.50 39
17 Alice Mutton 20 - 1 kg tins 39.00 0
18 Carnarvon Tigers 16 kg pkg. 62.50 42
19 Teatime Chocolate Biscuits 10 boxes x 12 pieces 9.20 25

ProductID ProductName QuantityPerUnit UnitPrice UnitsInStock
14 Tofu 40 - 100 g pkgs. 23.25 35
15 Genen Shouyu 24 - 250 ml bottles 15.50 39
17 Alice Mutton 20 - 1 kg tins 39.00 0
18 Carnarvon Tigers 16 kg pkg. 62.50 42
19 Teatime Chocolate Biscuits 10 boxes x 12 pieces 9.20 25

Telerik RadDataPager can be used to display paging navigation controls for other data-bound controls that implement the IPageableItemContainer or IRadPageableItemContainer interface (like the RadListView and MS ListView) as well as the MS DataPager control.

This demo illustrates how to use the MS DataPager control for paging in RadListView and to have the Telerik RadDataPager for navigating data in the MS ListView.

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  %>

<%@ 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" />
    <div class="demo-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadListView runat="server" ID="RadListView1" AllowPaging="True" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" Skin="Silk">
                <AlternatingItemTemplate>
                    <tr class="rlvA">
                        <td>
                            <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                        </td>
                    </tr>
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <tr class="rlvI">
                        <td>
                            <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                        </td>
                    </tr>
                </ItemTemplate>
                <EmptyDataTemplate>
                    <div>
                        <div>
                            There are no items to be displayed.
                        </div>
                    </div>
                </EmptyDataTemplate>
                <LayoutTemplate>
                    <div class="RadListView RadListView_Silk">
                        <table cellspacing="0" style="width: 100%;" class="rlvTable">
                            <thead>
                                <tr class="rlvHeader">
                                    <th>ProductID
                                    </th>
                                    <th>ProductName
                                    </th>
                                    <th>QuantityPerUnit
                                    </th>
                                    <th>UnitPrice
                                    </th>
                                    <th>UnitsInStock
                                    </th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td colspan="5" style="background-color: #f6f6f6">
                                        <asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="RadListView1" PageSize="5">
                                            <Fields>
                                                <asp:TemplatePagerField>
                                                    <PagerTemplate>
                                                        <span style="display: block; padding: 3px 7px;"></span>
                                                    </PagerTemplate>
                                                </asp:TemplatePagerField>
                                                <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="false"></asp:NextPreviousPagerField>
                                                <asp:NumericPagerField></asp:NumericPagerField>
                                                <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="false"></asp:NextPreviousPagerField>
                                                <asp:TemplatePagerField>
                                                    <PagerTemplate>
                                                    </PagerTemplate>
                                                </asp:TemplatePagerField>
                                            </Fields>
                                        </asp:DataPager>
                                    </td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr id="itemPlaceholder" runat="server">
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </LayoutTemplate>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>
        <br />
        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <asp:ListView ID="ListView1" runat="server" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <tr class="lvItem">
                        <td>
                            <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                        </td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <tr class="lvAltItem">
                        <td>
                            <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                        </td>
                    </tr>
                </AlternatingItemTemplate>
                <EmptyDataTemplate>
                    <table id="Table1">
                        <tr>
                            <td>No data was returned.
                            </td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <LayoutTemplate>
                    <table id="Table2" cellpadding="0" cellspacing="0" style="border: 1px solid #C3C3C3; width: 100%;">
                        <tr id="Tr1">
                            <td id="Td1">
                                <table id="itemPlaceholderContainer" runat="server" border="0" style="font: 14px/1 segoe ui; width: 100%;" cellspacing="0">
                                    <tr id="Tr2" runat="server" class="lvAltItem">
                                        <th id="Th1" runat="server" style="text-align: left; font-weight: normal;">ProductID
                                        </th>
                                        <th id="Th2" runat="server" style="text-align: left; font-weight: normal;">ProductName
                                        </th>
                                        <th id="Th3" runat="server" style="text-align: left; font-weight: normal;">QuantityPerUnit
                                        </th>
                                        <th id="Th4" runat="server" style="text-align: left; font-weight: normal;">UnitPrice
                                        </th>
                                        <th id="Th5" runat="server" style="text-align: left; font-weight: normal;">UnitsInStock
                                        </th>
                                    </tr>
                                    <tr id="itemPlaceholder" runat="server">
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPagerProducts" runat="server" PagedControlID="ListView1" PageSize="5" Skin="Silk">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
            </asp:ListView>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT top 30 [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance