Two Pagers synchronized

Using several PagerDataSource controls to page the same control

Some times we have the necessity to use two pagers in a form to provide better navigation. For example, one above a list of data and the other below the data. When the user clicks in one pager, we have to update the data that is shown between the pagers and maintain the pagers synchronized. Thanks to the innovative design of the PagerDataSource this scenario can be accomplished with no code at all!

Remember that the PagerDataSource acts as a data source and as a data consumer. The DataList will consume the data exposed by the first PagerDataSource, and that PagerDataSource will consume the data exposed by the ObjectDataSource. The other PagerDataSource will also consume the data exposed by the first PagerDataSource. And we can continue linking together as many PagerDataSource controls as we want!

The source code for this page is shown after the live sample.

Product List

Product 1

Full description for product number 1

2.00 $

Product 2

Full description for product number 2

4.00 $

Product 3

Full description for product number 3

6.00 $

Product 4

Full description for product number 4

8.00 $

Product 5

Full description for product number 5

10.00 $

Product 6

Full description for product number 6

12.00 $

Product 7

Full description for product number 7

14.00 $

Product 8

Full description for product number 8

16.00 $

Product 9

Full description for product number 9

18.00 $

Product 10

Full description for product number 10

20.00 $

Product 11

Full description for product number 11

22.00 $

Product 12

Full description for product number 12

24.00 $

Product 13

Full description for product number 13

26.00 $

Product 14

Full description for product number 14

28.00 $

Sample source code

The ASPX file for this sample is:.

            <%@
            Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="TwoPagers.aspx.cs" Inherits="TwoPagers" Title="Two Pagers synchronized" 
                                        %>

            <%@
            Register Assembly="PagerDataSource" Namespace="Manu.Web.UI.WebControls" TagPrefix="manu" %>

            <asp:Content 
                    ID="Content1" ContentPlaceHolderID="Content" Runat="Server">

                <h2>Product List</h2>

                <manu:PagerDataSource
            ID="PagerDataSource1"
            runat="server"
        
                    DataSourceID="ObjectDataSource1"
            PageSize="14">

                </manu:PagerDataSource>

                <asp:DataList
                ID="DataList1" runat="server" 
        
                    DataKeyField="id"
            DataSourceID="PagerDataSource1" 

                    RepeatColumns="7"
            RepeatDirection="Horizontal"
            Width="100%">

                    <ItemTemplate>

                        <table>

                            <tr>

                <td align="center">

            <asp:Label 
                    ID="idLabel" runat="server"
        
            Text='<%# Eval("id") %>'></asp:Label>

                </td>

                            </tr>

                            <tr>

                <td align="center">

            <b><asp:Label
            ID="nameLabel"
            runat="server"
        
            Text='<%# Eval("name") %>'></asp:Label></b>

                </td>

                            </tr>

                            <tr>

                <td align="center">

            <asp:Label 
                    ID="descriptionLabel" 
                        runat="server"
        
            Text='<%# Eval("description") %>'></asp:Label>

                </td>

                            </tr>

                            <tr>

                <td align="center">

            <asp:Label 
                    ID="priceLabel" runat="server"
        
            Text='<%# Eval("price", "{0:#0.00}") %>'>

            </asp:Label>
            $

                </td>

                            </tr>

                        </table>

                    </ItemTemplate>

                    <ItemStyle
            BackColor="White"
            ForeColor="#436799"
            />

                </asp:DataList>

                <manu:PagerDataSource
            ID="PagerDataSource2"
            runat="server"
        
                    DataSourceID="PagerDataSource1"
            PageSize="14">

                </manu:PagerDataSource>

                <asp:ObjectDataSource
            ID="ObjectDataSource1"
            runat="server"
            TypeName="ProductsDAL"
        
                    SelectMethod="GetPagedData"
            SelectCountMethod="CountAll"
            EnablePaging="True"

                    MaximumRowsParameterName="maxRows" StartRowIndexParameterName="startIndex">

                </asp:ObjectDataSource>

            </asp:Content>

The code-behind file (ASPX.CS) is:

using System;
 
public partial class
    TwoPagers : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
}