Click here to Skip to main content
13,556,681 members
Click here to Skip to main content
Add your own
alternative version


36 bookmarked
Posted 20 Jun 2007
Licenced CPOL

Playing with the GridView PagerBar

, 22 Jun 2007
Rate this:
Please Sign up or sign in to vote.
Extend GridView.PagerBar while preserving its functionality and add a drop-down to change the page size

Screenshot - gridViewPager.gif


If you need table paging functionality, the GridView's PagerBar does a pretty good job for you. Actually, a single click on the AllowPaging property will adorn your table with a nice and fully functional numeric pager. Another click on Pager Settings -> Mode and your pager can change the look 3 times. You don't like any of those looks? Right click the grid, select Edit Template -> PagerTemplate and you are on your own. The problem is that once you template the pager, all of the nice PagerBar functionality is gone. No more clickable page numbers or previous/next buttons; you have to redo them in your template manually.

In this article, we will extend the PagerBar while preserving its functionality. We will add a drop-down that will enable page size changes, the number of rows displayed in one page. This example is simple enough to demonstrate the method and yet it is demanding. Besides extending the look of the PagerBar, we will also have to enable and handle the drop-down's AutoPostback event.


This work was inspired by a post of Phillip Williams' that can be found here. He recommended using the GridView RowCreated event to add a link control to the PagerBar. Very useful information about paging in GridView control can be found in the well-written paper, "Custom Paging in GridView Control" by Francisco Santos Jr.

How we do it

The RowCreated event is raised for each row created in the GridView control. We are interested in the pager row only, so we ignore all other rows. We still do this inside a shared method of our class in order to simplify the code at the user side (and have him pay for the convenience with a few CPU cycles).

If gridRow.RowType <> DataControlRowType.Pager Then Return

Before we insert the page size selector into the PagerBar, we have to make sure that the PagerBar is visible even if the whole table has fewer rows than the current page size. Otherwise, the user will not be able to make the page size smaller. We are currently handling the RowCreated event. As it is too early in the control's life to handle PagerBar visibility, we therefore have to subscribe to the PreRender event of the grid:

Dim enoughRows As Boolean = ( grid.Rows.Count >= MINIMAL_PAGE_SIZE )
If enoughRows Then
    AddHandler grid.PreRender, 
    New EventHandler( AddressOf MakeSurePagerIsVisible)
End If

Once we've grabbed the grid PreRender event, we have to pay attention to the Position settings of the GridView pager. This is because the visibility of the TopPagerRow and BottomPagerRow are handled in GridView independently:

Private Shared Sub MakeSurePagerIsVisible(ByVal sender As Object, 
    ByVal e As System.EventArgs)

    Dim grid As GridView = sender
    Select Case grid.PagerSettings.Position
        Case PagerPosition.Bottom
            grid.BottomPagerRow.Visible = True
        Case PagerPosition.Top
            grid.TopPagerRow.Visible = True
        Case PagerPosition.TopAndBottom
            grid.BottomPagerRow.Visible = True
            grid.TopPagerRow.Visible = True
    End Select

End Sub

Finally, we can add the page size selection drop-down to the pager. A look into the rendered HTML tells us the pager is a table structure that we have to navigate in order to insert a cell at the end of the row. The table cell with the page size selector is created in the CreateSizer function. Once we are in it, we add a label to describe the DropDown. We should not forget to enable AutoPostBack and to signup for the TextChanged event:

sel.AutoPostBack = True
AddHandler sel.TextChanged, 
    New EventHandler( AddressOf PageSizeSelector_Clicked)

Navigation in the pager table happens in the GetPagerTableRow function. This is the code that depends on the way the pager is rendered. This is dangerous because Microsoft might change the way the pager is rendered and then our code would break. Moreover, it hinders our code working with a templated pager if the template does not mimic the generated table structure. Alas, all of those improvements are left to you, dear reader.

The selected page size is stored in a cookie with a unique name that contains the page and control names. Therefore the page and the site can have multiple grids with page length controlled, and all of them can act independently.

Using the code

  1. Add the GridViewPageSize class to your project. A good place to put it is the App_Code folder.
  2. Import the Bsp.Software namespace into your code behind the page with the GridView:
    Imports Bsp.Software
  3. (Optional) Set the page size from the cookie, if available:
    Protected Sub GridView_Load(ByVal sender As Object, 
        ByVal e As System.EventArgs) _
        Handles GridView1.Load, GridView2.Load
        Dim gv As Control = sender
        If Not gv.Page.IsPostBack Then
            GridViewPageSize.SetPageSize(Me, sender)
        End If
    End Sub
  4. Insert the PageSize selector into the pager at the RowCreated event:
    Protected Sub GridView_RowCreated(ByVal sender As Object, 
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles GridView1.RowCreated, GridView2.RowCreated
        GridViewPageSize.AddSizerToGridPager(sender, e.Row)
    End Sub


  • 20 June, 2007: The code and this paper were created and submitted for the CodeProject review.
  • 21 June, 2007: The code was improved thanks to Phillip Williams. The original version did not handle situations when the page refresh event occurred right after the GridView page size changed. The complete PageSizeSelector_Clicked should be re-executed even when the cookie created during the preceding post-back already exists.


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


About the Author

peter gabris
Technical Lead
United States United States
A neighbor promised to show me the first computer in the city if I detail his motorbike. He let me in and I stayed forever. I learned how to tame the beast. I was 14.

A few years later I figured out how to sqeeze hydrological/hydraulic models into 8K memory. The models were used on big rivers including Indus River, Yamuna River, Danube River. The version in Pakistan (that I later converted from FORTRAN to C) is still in use. Over 30 years and still running.

6 days took my book Word of Computers (in Slovak language) to completely sell out.

Annual LEGO price was awarded to an institute led by me for our work in education. Money went to charity, I still have the tie.

Spent years in consulting. Project rescue is a smokejumper's job. I saved a bunch of hoplessly failing projects in areas of procurement, recruitment, check image scanning and ICR, business risk evaluation.

15 months took my latest SAAS application to earn million dollars.

You may also be interested in...

Comments and Discussions

GeneralWell done Pin
Bryan Avery18-Oct-07 22:54
memberBryan Avery18-Oct-07 22:54 
QuestionRe: Well done Pin
Bryan Avery18-Oct-07 22:57
memberBryan Avery18-Oct-07 22:57 
AnswerGreat job. thanks for sharing... Pin
Liu xiaoyan21-Oct-09 8:41
memberLiu xiaoyan21-Oct-09 8:41 
GeneralRe: Great job. thanks for sharing... Pin
peter gabris22-Oct-09 10:16
memberpeter gabris22-Oct-09 10:16 
QuestionDataset rather than SqlDataSource Pin
idltsa15-Aug-07 2:20
memberidltsa15-Aug-07 2:20 
AnswerRe: Dataset rather than SqlDataSource Pin
peter gabris15-Aug-07 3:41
memberpeter gabris15-Aug-07 3:41 
GeneralRe: Dataset rather than SqlDataSource Pin
idltsa17-Aug-07 16:53
memberidltsa17-Aug-07 16:53 
GeneralVery well, Peter! Pin
janicko@juno.com9-Jul-07 14:25
memberjanicko@juno.com9-Jul-07 14:25 
GeneralGreat article. Pin
slobik21-Jun-07 7:07
memberslobik21-Jun-07 7:07 
GeneralCool Pin
merlin98120-Jun-07 11:57
membermerlin98120-Jun-07 11:57 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180515.1 | Last Updated 22 Jun 2007
Article Copyright 2007 by peter gabris
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid