ManuelAbadia.com
PagerDataSource samples
Samples



Product Information

Customizing the PagerDataSource control (Part 1)

We are all different. What some people like other don't and that's why a good pager should be customizable. The PagerDataSource was designed with customization in mind, so with very little effort we can change its appearance. Even with this customization options, there are some scenarios that need even more customization so if you need to push customization to the limits, take a look at the sample "Customizing the PagerDataSource (2)".

The following properties let us customize the PagerDataSource:

  • ShowFirstLast: toggles the visibility of the go to the first and last page links.
  • ShowPreviousNext: toggles the visibility of the go to the previous and next page links.
  • ShowNumbers: toggles the visibility of the page links.
  • ShowSeparator: toggles the visibility of the separators between page links.
  • FirstPageText: the text to show in the first page link.
  • LastPageText: the text to show in the last page link.
  • PreviousPageText: the text to show in the previous page link.
  • NextPageText: the text to show in the next page link.
  • SeparatorText: the text to show between page links.
  • MorePagesText: the text to show if there are more pages but we aren't showing them (see MaxPagesAtEachSide).
  • MaxPagesAtEachSide: if we're paging a big data source, we can have a lot of pages to show. Usually we don't want to show too many page links in our pager. This property lets the user to choose how many page links will be shown at each side of the selected page. For example, if the property is set to "4" and we are in page "10", the pager will show page links from 6 to 14. When the pager hasn't show all links, it will show the MorePagesText to let the user know that there are more pages in that direction.
  • NumbersPosition: by default, the links of the pages are located in the center of the pager, between the first and previous page links and the next and last page links. This property lets the user to relocate the page links also on the left or the right.
  • RenderMode: by default, the pager is rendered as an HTML table. However with this property we can change the default value and render the pager as a CSS list (see the CSS rendering sample for more information).
  • DisableUnnecessaryControls: by default, if we're on the first page, the go to first page and go to the previous page links controls are rendered as plain text instead of an hyperlink because clicking on them causes an unnecessary roundtrip to the server. Some people prefer them to be hyperlinks even if it has no sense clicking them, so this property controls that.
  • Control Style related properties: The control has several style related properties for setting colors, fonts and css classes to the different areas the control creates.

In the following sample there are a few synchronized pagers customized in different ways. Note that in order to keep all those pagers synchronized we didn't have to write a single line of code and the data is extracted from the ObjectDataSource only once.

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 $
<<<1|2|3|4|5|6|7|8>>>
FirstPrevNextLast
1-2-3-4-5[...]<<<>>>
12345678
<>1|2|3|4|5|6|7|8
FirstPrev1|2|3|4|5|6|7|8NextLast
<<<1-2-3-4-5...>>>
12345678<>
 

Sample source code

The ASPX file for this sample is:.


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

 

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

    <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">

    </manu:PagerDataSource>

   

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

        DataSourceID="PagerDataSource1" PageSize="14" FirstPageText="First"

        LastPageText="Last" NextPageText="Next" PreviousPageText="Prev"

       ShowNumbers="False" DisableUnnecessaryControls="False">

    </manu:PagerDataSource>

   

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

        DataSourceID="PagerDataSource2" PageSize="14" MaxPagesAtEachSide="2"

        MorePagesText="[...]" SeparatorText="-" DisableUnnecessaryControls="False" 

        NumbersPosition="Left">

    </manu:PagerDataSource>

 

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

        DataSourceID="PagerDataSource3" PageSize="14" NumbersPosition="Left"

        ShowFirstLast="False" ShowPreviousNext="False" ShowSeparator="False">

    </manu:PagerDataSource>

   

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

        DataSourceID="PagerDataSource4" PageSize="14" ShowFirstLast="False"

        NumbersPosition="Right">

    </manu:PagerDataSource>

 

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

        DataSourceID="PagerDataSource5" PageSize="14"

        FirstPageText='<img src="images/first.gif" alt="First" />'

        PreviousPageText='<img src="images/prev.gif" alt="Prev" />'

        NextPageText='<img src="images/next.gif" alt="Next" />'

        LastPageText='<img src="images/last.gif" alt="Last" />'>

    </manu:PagerDataSource>

   

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

        DataSourceID="PagerDataSource6" PageSize="14" BackColor="White"

        BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"

        DisableUnnecessaryControls="False" Font-Bold="True" SeparatorText="-">

    </manu:PagerDataSource>

 

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

        DataSourceID="PagerDataSource7" PageSize="14" NumbersPosition="Left"

        ShowFirstLast="False" BackColor="#133769" BorderColor="Black" BorderStyle="Solid"

        BorderWidth="1px" CellPadding="0" CellSpacing="0" GridLines="Both"

        ShowSeparator="False" DisableUnnecessaryControls="False" Font-Bold="True" Font-

        Size="Large" ForeColor="White">

    </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 Customizing1 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

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