How to create customized Pagers for ASP.NET applications

• Download source files - 18.2 Kb
• Download demo project - 34 Kb

Introduction

Once I'd started to work with the DataGrid web control, I was frustrated with the fact that it has very limited paging styles - you could choose to use either next/back buttons or page numbers but you couldn't choose both. If I wanted to use drop down list, I couldn't do it at all!

So, I've took the control to my hands and decided to develop a paging control to support all my needs.

The result was a very simple to use control library - drop it on the form, bind it to a DataGrid and it does the rest. But in the other hand, it is very powerful and flexible.

The library I've developed contains three pagers:

1. PageNumbersPager - Displays clickable page numbers.
2. NextBackPager - Allows to navigate Next or Back.
3. DropDownListPage - Allows to change the page number by selecting page from drop down list.

The control library also implements a simple framework that allows you to add your own pagers that can communicate with other pagers on the page. (I did it so I will be able to place many pagers on the same page and allow them to be synchronized with each other.)

I will not describe all the properties of all pagers, I will brief them shortly. To see all the features, download the sample code and check it.

Before I will describe how the control library is built: the attached source code includes a sub folder named Menu which contains three classes without any implementation. I intend to include in this library also Multi-use menu. For this time, just ignore these classes.

Now, to work:

How does it work

The control library is fairly simple. It contains the following classes:

• PagerBase class - Inherits from WebControl and used as base class for all pager controls. This class is abstract (it does not contain any rendering methods) and implements all common pager functions.
• PostBackEventHandlerPager class - Another abstract class that is derived from the PagerBase class and implements the IPostbackEventHandler interface which allows the control to raise events to its containers (in our case - the containing page).
• <PagerType>Pager classes (PageNumbersPager, DropDownListPager, NextBackPager) - the classes that are derived either from PagerBase or PostBackEventHandlerPager classes. These controls will be placed on the page.
• PageNumberChanged delegate - The delegate that is used to implement the PageNumberChaned event.
• PageNumberChangeEventArgs class - The class that holds the PageNumberChanged event properties.

The first question I assume you ask is: "Why does he separate the PagerBase and PostBackEventHandlerPager to two classes instead of doing it in one class ?". Well, the reason is to allow developers who want to extend this control to choose whether to let the base class to handle post back events such as click events (example for such control is the NextBackPager which changes the page number when the control is clicked) or they want their control to do it itself (like in the DropDownListPager which causes the page number change due to data change - user selection of item from the list). If you did not understand this explanation, just look at the code and see the difference between the NextBackPager and DropDownListPager controls.

A little explanation about the classes:

The PagerBase class includes all the common properties of the pager:

• DataGrid property - Get/Set the DataGrid control to bind to.
• PageCount property - Get/Set the number of pages (Set is allowed only in unbound mode).
• CurrentPageNumber property - The current page number.
• RecieveSync and CauseSync properties - Allow the control to synchronize with other pagers on the same page

The RecieveSync and CauseSync properties are used to support cases where you have more then one pager on the page and you want them to be synchronized to each other. These properties are not required in bound mode (when the pagers are bound to the same grid) because the fact they are bound to the same grid causes them to sync. But if you work in unbound mode, you can decide for each control whether it notifies other pagers about page changed (CauseSync=true) and whether the control should respond for sync signals from other controls (RecieveSync=true).

This class also includes two methods that serve the derived classes:

• GetPostBackHrefString method - Returns the string of the __dopostback() function with the correct argument to capture postback events.
• OnPageNumberChanged method - Implements all that is needed to be done due to page change event.

The PostBackEventHandlerPager class contains one methods which is the IPostBackEventHandler interface implementation. It simply creates a new PageChangedEventArgs object and calls the OnPageNumberChanged method.

The <PagerStyle>Pager controls add custom properties relevant only to them (for example, the NextBackPager control implements the Text, PagingDirection properties).

How to create my Own pager using this code

Follow these steps to implement your own pager that integrates into my control library:

1. Create a class that derives from PagerBase or PostBackEventHandlerPager classes.
2. Implement any custom properties you need.
3. Implement the rendering methods.
4. Manage the state of your custom properties by overriding the SaveViewState and LoadViewState methods (but don't forget to call the base methods).
5. If you derived from PagerBase, raise the PageNumberChange in the appropriate place (in the DropDownListPager example, it is done in the RaisePostDataChangedEvent method).

How to use these controls

1. Include the controls in your toolbox (I assume you know how to do it).
2. Drop the appropriate pager on your page.
3. For bound pager - insert to the OnInit method, the code to bind the control to the appropriate DataGrid.
4. For unbound pager - implement the PageNumberChanged event to do the appropriate actions.

The following code illustrates how to set the control's DataGrid property:

override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
   InitializeComponent();
   PageNumbersPager1.DataGrid = DataGrid1;
   base.OnInit(e);
}

The reason I am doing it that way and not by using the properties window of the visual designer is very simple: I did not succeed to tell the designer to add this code to the InitializeComponent method like it does when implementing the event (if you know how to do it, please let me know what I am missing).

Final Words

I hope you will find this control library useful and I'm sure you will find that there are many things to add (other pagers, extend the existing one, etc.). Feel free to use this library for any purpose you want (I don't care if you try to sell it... :-) ).

History

• 30 Apr 2004 - updated downloads