Click here to Skip to main content
Click here to Skip to main content

A very nice and complete custom GridView pager

, 6 Oct 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
How to implement a custom pager for the Gridview's PagerTemplate.

Screenshot - FullGridPager_Shot1.jpg

Figure 1: The FullGridPager


The v.2.0 of the GridView control allows us to incorporate custom page controls through the PagerTemplate template. The pre-built modes (Numeric, NextPrev etc,) are proved to be highly deficient especially when there are lots of data rows spawning in numerous pages.

In this article, I will show you how to implement and use a very nice custom pager, FullGridPager, with a full set of features:

  • First, Previous, Next, and Last page links. These links are smart: when on the first page, the First and Previous links are hidden; when on the last page, the Next and Last links are hidden.
  • A page counter showing the currently selected page number and the total amount of pages.
  • Page groups. The default behavior is to show all available page number links at once. When this is inconvenient or even unacceptable (e.g., in forum threads where posts spawn in hundreds of pages), you can set the MaxVisiblePageNumbers property to have the links displayed in groups. The Previous and Next links are affected, and automatically move to the previous and next group when needed. Furthermore, a DropDownList containing the available groups is displayed. In this way, you can switch between page groups with a single mouse click.

Figure 1 illustrates a full fledged FullGridPager. Also see figures 2 and 3 below.

Screenshot - FullGridPager_Shot2.jpg

Figure 2: Smart links (First and Previous are hidden)

Screenshot - FullGridPager_Shot3.jpg

Figure 3: Default behavior with no page groups

What you need to run the code

Besides the implementation class (FullGridPager.cs) found in the App_Code folder, the following files are also needed in order to apply a nice look and feel to the custom pager:

  • FullGridPager.css: the styles used by the HTML pager template.
  • The Images folder: contains the images for the First, Previous, Next, and Last links.

I have also included a testbed ASPX web form to demonstrate the usage of the FullGridPager class:

  • Default.aspx: contains a databound GridView control with a custom PagerTemplate and a SqlDataSource. The Northwind database is used to retrieve data.
  • Default.aspx.cs: the C# code-behind.

Using the code

Step 1. Copy and paste the necessary HTML code inside the PagerTemplate of a GridView control. The HTML can be found in the zipped Default.aspx file. Please make sure you retain the ID values. Also, do not forget to link the FullGridPager.css to your web page.

Step 2. Copy FullGridPager.cs in the App_Code folder of your web project. Make sure FullGridPager.css and the image files are available, too.

Step 3. Add the following code in the code-behind of your web form (the code can be found in the zipped Default.aspx.cs file):

using dpant;

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

    protected FullGridPager fullGridPager;
    protected int MaxVisible = 5;
    protected void Page_Load(object sender, EventArgs e)
      if (IsPostBack)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, 
                            "Page", "of");

    protected void GridView1_DataBound(object sender, EventArgs e)
      if (fullGridPager == null)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, "Page", "of");

    protected void ddlPageGroups_SelectedIndexChanged(object sender, EventArgs e)
      if (fullGridPager == null)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, 
                            "Page", "of");


A call to the CreateCustomPager method is necessary during postbacks. This way, the dynamic LinkButtons are recreated and their events get fired. On the other hand, the PageGroups method is only called during the grid's databinding since the ddlPageGroups DropDownList is a design time control (see the HTML template code).

The FullGridPager class

The FullGridPager class exposes the following public properties:

  • MaxVisiblePageNumbers: the number of page links to display per group.
  • PageCounterText, PageCounterTotalText: the text to localize the page counter.
  • TheGrid: the GridView control to apply to.

The available constructors are:

  • FullGridPager (GridView TheGrid): the default behavior constructor.
  • FullGridPager (GridView TheGrid, int MaxVisible, string CounterText, string TotalText): the constructor to change the default settings.

Public methods:

  • CreateCustomPager (GridViewRow PagerRow): renders the pager.
  • PageGroups (GridViewRow PagerRow): renders the page group's dropdownlist.
  • PageGroupChanged (GridViewRow PagerRow): the ddlPageGroups_SelectedIndexChanged event must call this method to switch between page groups.

Points of interest

In this article, you also learn how to:

  • Create and use dynamic LinkButton controls inside the PagerTemplate template of a GridView control.
  • Properly re-create dynamic controls in order to fire their events during postbacks.

In particular, pay attention to how the LinkButtons are created at runtime:

private void CreatePageNumbers(HtmlTable pagerInnerTable, int insertCellPosition)
  for (int i = firstPageNumber, pos = 1; i <= lastPageNumber; i++, pos++)
     // Create a new table cell for every data page number.

     HtmlTableCell tableCell = new HtmlTableCell();
     if (theGrid.PageIndex == i - 1)
        tableCell.Attributes.Add("class", "pageCurrentNumber");
        tableCell.Attributes.Add("class", "pagePrevNextNumber");
     // Create a new LinkButton for every data page number.

     LinkButton lnkPage = new LinkButton();
     lnkPage.ID = "Page" + i.ToString();
     lnkPage.Text = i.ToString();
     lnkPage.CommandName = "Page";
     lnkPage.CommandArgument = i.ToString();
     lnkPage.CssClass = "pagerLink";
     // Place link inside the table cell; Add the cell to the table row.

     pagerInnerTable.Rows[0].Cells.Insert(insertCellPosition + pos, tableCell);

Further development

I would very much like to see this implemented as a web control. Anyone who is more experienced in creating web control classes than I am is welcomed to try (and let me know of it Wink | ;) )


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
Greece Greece
No Biography provided
Follow on   Twitter

Comments and Discussions

QuestionFor VB .Net, need a few tweak. PinmemberMember 814692318-Jan-15 17:24 
QuestionPage numbers not functioning. PinmemberSS_chandru18-Sep-14 15:14 
GeneralFantastic! PinmemberMember 101373312-Jul-13 15:22 
GeneralRe: Fantastic! Pinmemberashuraj1066-Aug-13 9:39 
QuestionA plea from the author of this article Pinmemberdimpant21-Sep-12 9:07 
Bug[My vote of 1] Doesn't work Pinmembertogoa20-Sep-12 22:35 
GeneralRe: [My vote of 1] Doesn't work Pinmemberdimpant21-Sep-12 9:06 
QuestionVery good Article.. But Query in createPageNumber method PinmemberMember 93081255-Aug-12 21:04 
AnswerRe: Very good Article.. But Query in createPageNumber method PinmemberMember 816264321-Aug-12 6:52 
GeneralGridView pager PinmemberZelienka23-Oct-10 11:41 
GeneralGreetings PinmemberMember 29974176-Oct-10 9:59 
GeneralExcellent Pinmembernotic0077-May-10 4:42 
GeneralIt is working great, but small problem PinmemberMember 30051843-Apr-10 17:55 
GeneralGood Work PinmemberMilton_win1-Feb-10 10:15 
GeneralYour pager is fantastic PinmemberArmenia Rua25-Jul-09 11:17 
GeneralRe: Your pager is fantastic PinmemberArmenia Rua25-Jul-09 14:49 
GeneralRe: Your pager is fantastic Pinmemberdimitris.dpant19-Dec-09 10:22 
GeneralGood Articals for a Large Amount of Data with Calculations... Pinmemberdfderdfdsr8-Jun-09 22:36 
GeneralRe: Good Articals for a Large Amount of Data with Calculations... Pinmemberdimitris.dpant19-Dec-09 10:18 
Generalnot support updatepanel Pinmembercode.live19-May-09 19:28 
GeneralRe: not support updatepanel Pinmemberdimitris.dpant19-Dec-09 10:17 
GeneralMy vote of 1 Pinmembersaczade29-Apr-09 0:34 
GeneralShow pager on top row PinmemberRodney Harding13-Mar-09 2:19 
GeneralRe: Show pager on top row Pinmemberdimitris.dpant19-Dec-09 10:11 
Generalthanks! Pinmemberspandal12-Mar-09 22:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150302.1 | Last Updated 6 Oct 2007
Article Copyright 2007 by dimpant
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid