Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

A very nice and complete custom GridView pager

Rate me:
Please Sign up or sign in to vote.
4.12/5 (21 votes)
6 Oct 2007CPOL3 min read 240.3K   8.6K   88   66
How to implement a custom pager for the Gridview's PagerTemplate.

Screenshot - FullGridPager_Shot1.jpg

Figure 1: The FullGridPager

Introduction

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):

C#
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");
        fullGridPager.CreateCustomPager(GridView1.BottomPagerRow);
      }
    }

    protected void GridView1_DataBound(object sender, EventArgs e)
    {
      if (fullGridPager == null)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, "Page", "of");
      fullGridPager.CreateCustomPager(GridView1.BottomPagerRow);
      fullGridPager.PageGroups(GridView1.BottomPagerRow);
    }

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

}

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:

C#
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");
     else
        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.

     tableCell.Controls.Add(lnkPage);            
     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 ;) )

License

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


Written By
Software Developer (Senior)
Greece Greece
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Question[My vote of 2] not good one, this is too old Pin
R koyee2-Apr-16 14:05
R koyee2-Apr-16 14:05 
AnswerRe: [My vote of 2] not good one, this is too old Pin
dimpant2-Apr-16 22:39
dimpant2-Apr-16 22:39 
QuestionJust a suggestion Pin
Magius969-Dec-15 5:03
Magius969-Dec-15 5:03 
AnswerRe: Just a suggestion Pin
dimpant9-Dec-15 8:14
dimpant9-Dec-15 8:14 
QuestionFor VB .Net, need a few tweak. Pin
Member 814692318-Jan-15 16:24
Member 814692318-Jan-15 16:24 
QuestionPage numbers not functioning. Pin
SS_chandru18-Sep-14 14:14
SS_chandru18-Sep-14 14:14 
GeneralFantastic! Pin
Member 101373312-Jul-13 14:22
Member 101373312-Jul-13 14:22 
GeneralRe: Fantastic! Pin
Singh@Ashu6-Aug-13 8:39
Singh@Ashu6-Aug-13 8:39 
QuestionA plea from the author of this article Pin
dimpant21-Sep-12 8:07
dimpant21-Sep-12 8:07 
Bug[My vote of 1] Doesn't work Pin
togoa20-Sep-12 21:35
togoa20-Sep-12 21:35 
GeneralRe: [My vote of 1] Doesn't work Pin
dimpant21-Sep-12 8:06
dimpant21-Sep-12 8:06 
Hello to you and all,

I am amazed to see how many people have posted questions and/or suggestions about this article.

First of all, I am truly sorry I didn't reply to all of you.

But let me remind you that this article was written 5 years ago in 2007 using Visual Studio 2005!!! So, logically, this article would be of no use to anyone or so I thought!

Do you really believe that this article is still of use to you? If so, let me know and I will try to update this article and answer your questions.

Thank you very much,
Dimitris

QuestionVery good Article.. But Query in createPageNumber method Pin
Member 93081255-Aug-12 20:04
Member 93081255-Aug-12 20:04 
AnswerRe: Very good Article.. But Query in createPageNumber method Pin
h4nnib4l_1121-Aug-12 5:52
h4nnib4l_1121-Aug-12 5:52 
GeneralGridView pager Pin
Zelienka23-Oct-10 10:41
Zelienka23-Oct-10 10:41 
GeneralGreetings Pin
Madhu_Annadanam6-Oct-10 8:59
Madhu_Annadanam6-Oct-10 8:59 
GeneralExcellent Pin
notic0077-May-10 3:42
notic0077-May-10 3:42 
GeneralIt is working great, but small problem Pin
Member 30051843-Apr-10 16:55
Member 30051843-Apr-10 16:55 
GeneralGood Work Pin
Milton_win1-Feb-10 9:15
Milton_win1-Feb-10 9:15 
GeneralYour pager is fantastic Pin
Armenia Rua25-Jul-09 10:17
Armenia Rua25-Jul-09 10:17 
GeneralRe: Your pager is fantastic Pin
Armenia Rua25-Jul-09 13:49
Armenia Rua25-Jul-09 13:49 
GeneralRe: Your pager is fantastic Pin
dimpant19-Dec-09 9:22
dimpant19-Dec-09 9:22 
GeneralGood Articals for a Large Amount of Data with Calculations... Pin
dfderdfdsr8-Jun-09 21:36
dfderdfdsr8-Jun-09 21:36 
GeneralRe: Good Articals for a Large Amount of Data with Calculations... Pin
dimpant19-Dec-09 9:18
dimpant19-Dec-09 9:18 
Generalnot support updatepanel Pin
code.live19-May-09 18:28
code.live19-May-09 18:28 
GeneralRe: not support updatepanel Pin
dimpant19-Dec-09 9:17
dimpant19-Dec-09 9:17 

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.