Click here to Skip to main content
11,926,429 members (56,283 online)
Click here to Skip to main content
Add your own
alternative version


88 bookmarked

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

You may also be interested in...

Comments and Discussions

QuestionFor VB .Net, need a few tweak. Pin
Member 814692318-Jan-15 17:24
memberMember 814692318-Jan-15 17:24 
QuestionPage numbers not functioning. Pin
SS_chandru18-Sep-14 15:14
memberSS_chandru18-Sep-14 15:14 
GeneralFantastic! Pin
Member 101373312-Jul-13 15:22
memberMember 101373312-Jul-13 15:22 
GeneralRe: Fantastic! Pin
ashuraj1066-Aug-13 9:39
memberashuraj1066-Aug-13 9:39 
QuestionA plea from the author of this article Pin
dimpant21-Sep-12 9:07
memberdimpant21-Sep-12 9:07 
Bug[My vote of 1] Doesn't work Pin
togoa20-Sep-12 22:35
membertogoa20-Sep-12 22:35 
GeneralRe: [My vote of 1] Doesn't work Pin
dimpant21-Sep-12 9:06
memberdimpant21-Sep-12 9:06 
QuestionVery good Article.. But Query in createPageNumber method Pin
Member 93081255-Aug-12 21:04
memberMember 93081255-Aug-12 21:04 
AnswerRe: Very good Article.. But Query in createPageNumber method Pin
Member 816264321-Aug-12 6:52
memberMember 816264321-Aug-12 6:52 
GeneralGridView pager Pin
Zelienka23-Oct-10 11:41
memberZelienka23-Oct-10 11:41 
GeneralGreetings Pin
Member 29974176-Oct-10 9:59
memberMember 29974176-Oct-10 9:59 
GeneralExcellent Pin
notic0077-May-10 4:42
membernotic0077-May-10 4:42 
GeneralIt is working great, but small problem Pin
Member 30051843-Apr-10 17:55
memberMember 30051843-Apr-10 17:55 
GeneralGood Work Pin
Milton_win1-Feb-10 10:15
memberMilton_win1-Feb-10 10:15 
GeneralYour pager is fantastic Pin
Armenia Rua25-Jul-09 11:17
memberArmenia Rua25-Jul-09 11:17 
GeneralRe: Your pager is fantastic Pin
Armenia Rua25-Jul-09 14:49
memberArmenia Rua25-Jul-09 14:49 
GeneralRe: Your pager is fantastic Pin
dimitris.dpant19-Dec-09 10:22
memberdimitris.dpant19-Dec-09 10:22 
GeneralGood Articals for a Large Amount of Data with Calculations... Pin
dfderdfdsr8-Jun-09 22:36
memberdfderdfdsr8-Jun-09 22:36 
GeneralRe: Good Articals for a Large Amount of Data with Calculations... Pin
dimitris.dpant19-Dec-09 10:18
memberdimitris.dpant19-Dec-09 10:18 
Generalnot support updatepanel Pin
code.live19-May-09 19:28
membercode.live19-May-09 19:28 
GeneralRe: not support updatepanel Pin
dimitris.dpant19-Dec-09 10:17
memberdimitris.dpant19-Dec-09 10:17 
GeneralMy vote of 1 Pin
saczade29-Apr-09 0:34
membersaczade29-Apr-09 0:34 
GeneralShow pager on top row Pin
Rodney Harding13-Mar-09 2:19
memberRodney Harding13-Mar-09 2:19 
GeneralRe: Show pager on top row Pin
dimitris.dpant19-Dec-09 10:11
memberdimitris.dpant19-Dec-09 10:11 
Generalthanks! Pin
spandal12-Mar-09 22:40
memberspandal12-Mar-09 22:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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.151126.1 | Last Updated 6 Oct 2007
Article Copyright 2007 by dimpant
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid