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 
1 Chai 10 boxes x 20 bags 18.00 39
2 Chang 24 - 12 oz bottles 19.00 17
3 Aniseed Syrup 12 - 550 ml bottles 10.00 13
4 Chef Anton's Cajun Seasoning 48 - 6 oz jars 22.00 53
5 Chef Anton's Gumbo Mix 36 boxes 21.35 0

ProductID ProductName QuantityPerUnit UnitPrice UnitsInStock
1 Chai 10 boxes x 20 bags 18.00 39
2 Chang 24 - 12 oz bottles 19.00 17
3 Aniseed Syrup 12 - 550 ml bottles 10.00 13
4 Chef Anton's Cajun Seasoning 48 - 6 oz jars 22.00 53
5 Chef Anton's Gumbo Mix 36 boxes 21.35 0

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