ManuelAbadia.com
PagerDataSource samples
Samples



Product Information

Customizing the PagerDataSource control (Part 2)

As the sample "Customizing the pager (1)" shows, the PagerDataSource offers a high level of customization. However, to be able to handle even more complex scenarios, we can define templates for all the items that a PagerDataSource control creates.

The following image shows the templates exposed by the PagerDataSource control:

Pager Templates

The PagerDataSource will instantiate the FirstPageTemplate, PreviousPageTemplate, NextPageTemplate and LastPageTemplate only. The FirstPageTemplate and LastPageTemplate will not be instantiated if the property ShowFirstLast is set to false. The same thing happens for the PreviousAndNextTemplate if the property ShowPreviousNext is set to "false". Any control can be placed in these templates, but it's necessary to have one control with a specific name in each template so the PagerDataSource automatically modify it in order to navigate to the correct page when that control is clicked. For that reason the control with the specific name should implement IButtonControl (Button, ImageButton and LinkButton implement this interface) if we're in PostBack mode or if we're in QueryStringRedirect mode, the control should be an HyperLink or an HtmlAnchor (more about PostBack mode and QueryStringMode in the sample called "Search Engine Optimization (1)". The specific names for the controls are the same as the template but without the suffix "Template". For example, the special name for the control that will change to the first page in FirstPageTemplate will be FirstPage.

The PagerDataSource will compute the number of pages to show. If there are more pages that are not shown on the left or on the right (because of the MaxPagesAtEachSide property), a MorePagesTemplate will be instantiated on the left or on the right respectively. An ItemTemplate will be instantiated for every page that will be shown by the control, except for the currently selected page that will use the SelectedItemTemplate. Between two pages, a SeparatorTemplate will be instantiated unless the ShowSeparator property is set to "false". If the property ShowNumbers is set to "false", none of the templates of this paragraph will be instantiated.

Some times, we don't want to show the page numbers but we want to show another thing that lets the user navigate to another page, like for example a TextBox and a button that will change to the specified page in the TextBox. We can accomplish this using the SingleItemTemplate. When the SingleItemTemplate is defined, the PagerDataSource will ignore the ItemTemplate, SelectedItemTemplate, SeparatorTemplate and MorePagesTemplate and instantiate a single SingleItemTemplate instead.

There is no need to specify all templates when customizing the PagerDataSource.  If we don't specify a template, the default rendering of the control for that part will be used.

When a template is instantiated, it can access to some context information that will be very helpful to create the template. The context information is an instance of a class called PagerItem with the following properties:

  • PageIndex: the page index (range [1..n]) for this PagerItem (-1 if it's not applicable, for example, in a MorePagesTemplate).
  • SelectedPageIndex: the page index (range [1..n]) of the selected page..
  • InternalPageIndex: the same as PageIndex but with range [0..n-1].
  • InternalSelectedPageIndex: the same as SelectedPageIndex but with range [0..n-1].
  • PageCount: the total number of pages of the PagerDataSource control.
  • TotalItemCount: the total number of items of the underlying data source.
  • Owner: to get a reference to the PagerDataSource that contain this PagerItem..

To access the context information in a template, use a data binding expression using Eval() or Container. For example, to get the SelectedPageIndex we have to use like <%# Eval("SelectedPageIndex") %> or <%# Container.SelectedPageIndex %>.

The PagerDataSource control will handle automatically all clicks for the special named controls in the templates. If we place a button in a template and we want to perform some actions when the user clicks on the button we can handle the ItemCommand event, which will be passed an instance of the PagerItemCommandEventArgs class with information about the event.

There is support for editing the templates in design time (see the design time integration sample for more information).

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


Product List

1
Product 1
Full description for product number 1
2.00 $
2
Product 2
Full description for product number 2
4.00 $
3
Product 3
Full description for product number 3
6.00 $
4
Product 4
Full description for product number 4
8.00 $
5
Product 5
Full description for product number 5
10.00 $
6
Product 6
Full description for product number 6
12.00 $
7
Product 7
Full description for product number 7
14.00 $
8
Product 8
Full description for product number 8
16.00 $
9
Product 9
Full description for product number 9
18.00 $
10
Product 10
Full description for product number 10
20.00 $
11
Product 11
Full description for product number 11
22.00 $
12
Product 12
Full description for product number 12
24.00 $
13
Product 13
Full description for product number 13
26.00 $
14
Product 14
Full description for product number 14
28.00 $
<<< | | | | | | | >>>
Page of 8
Page 1 of 8 << First < Prev 1|2|3|4|5|6|7|8 Next > Last >> Total Items = 105
 

Sample source code

The ASPX file for this sample is:.


<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="Customizing2.aspx.cs" Inherits="Customizing2" Title="Customizing the PagerDataSource" %>


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

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

    <h2>Product List</h2>

 

    <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="PagerDataSource1" runat="server"
        DataSourceID="ObjectDataSource1" PageSize="14"> 

        <ItemTemplate>

            <asp:Button ID="Item" runat="server" Text='<%# Eval("PageIndex") %>' />

        </ItemTemplate>

        <SelectedItemTemplate>

            <asp:Button ID="Item" runat="server" Text='<%# Eval("PageIndex") %>'

                BackColor="Gray" Font-Bold="True" />

        </SelectedItemTemplate>

    </manu:PagerDataSource>

    <manu:PagerDataSource ID="PagerDataSource2" runat="server"

        DataSourceID="PagerDataSource1" PageSize="14" 
        OnItemCommand="PagerDataSource2_ItemCommand">

        <FirstPageTemplate>

            <asp:ImageButton ID="FirstPage" runat="server" ImageUrl="images/first.gif" />

        </FirstPageTemplate>

        <LastPageTemplate>

            <asp:ImageButton ID="LastPage" runat="server" ImageUrl="images/last.gif" />

        </LastPageTemplate>

        <NextPageTemplate>

            <asp:ImageButton ID="NextPage" runat="server" ImageUrl="images/next.gif" />

        </NextPageTemplate>

        <PreviousPageTemplate>

           <asp:ImageButton ID="PreviousPage" runat="server" ImageUrl="images/prev.gif" />

        </PreviousPageTemplate>

        <SingleItemTemplate>

            Page

            <asp:TextBox ID="txtPage" runat="server" Width="45px"

               Text='<%# Eval("SelectedPageIndex") %>'></asp:TextBox>

            of

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

            <asp:ImageButton ID="Go" runat="server" ImageUrl="images/go.gif"

                CommandName="Go" ValidationGroup="Go" />

            <asp:RequiredFieldValidator ID="rfvPage" runat="server"

                ControlToValidate="txtPage" Display="Dynamic"

                ErrorMessage="Specify a page number" ValidationGroup="Go">

            </asp:RequiredFieldValidator>

            <asp:RangeValidator ID="RangeValidator1" runat="server"

                ControlToValidate="txtPage" Display="Dynamic"

                ErrorMessage="Page out of range" Type="Integer" MinimumValue="1"

                MaximumValue='<%# Eval("PageCount") %>' ValidationGroup="Go">

            </asp:RangeValidator>

        </SingleItemTemplate>

    </manu:PagerDataSource>

 

    <manu:PagerDataSource ID="PagerDataSource3" runat="server" 
        DataSourceID="PagerDataSource2" PageSize="14" DisableUnnecessaryControls="False"> 

        <FirstPageTemplate>

            Page

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

            of

            <asp:Label ID="lPageCount" runat="server"

                Text='<%# Eval("PageCount") %>'></asp:Label>

            <asp:LinkButton ID="FirstPage" runat="server">&lt;&lt; First</asp:LinkButton>

        </FirstPageTemplate>

        <LastPageTemplate>

            <asp:LinkButton ID="LastPage" runat="server">Last &gt;&gt;</asp:LinkButton>

            Total Items =

            <asp:Label ID="lItemCount" runat="server"

                Text='<%# Eval("TotalItemCount") %>'></asp:Label>

        </LastPageTemplate>

        <NextPageTemplate>

            <asp:LinkButton ID="NextPage" runat="server">Next &gt;</asp:LinkButton>

        </NextPageTemplate>

        <PreviousPageTemplate>

            <asp:LinkButton ID="PreviousPage" runat="server">&lt; Prev</asp:LinkButton>

        </PreviousPageTemplate>

    </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;

using System.Web.UI.WebControls;

using Manu.Web.UI.WebControls;

 

public partial class Customizing2 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

 

    protected void PagerDataSource2_ItemCommand(object sender,PagerItemCommandEventArgs e)

    {

        if (e.CommandName == "Go") {

            TextBox txtPage = (TextBox)e.Item.FindControl("txtPage");

            if (txtPage != null) {

                int currentPage;

                if (Int32.TryParse(txtPage.Text, out currentPage)) {

                    e.Item.Owner.ChangePage(currentPage - 1);

                }

            }

        }

    }

}
Copyright (c) 2006-2009 Manuel Abadia. All Rights Reserved.