Click here to Skip to main content
14,545,020 members

GridView Custom Paging with PageSize Change Dropdown

Rate this:
4.84 (29 votes)
Please Sign up or sign in to vote.
4.84 (29 votes)
5 May 2008CPOL
A GridView control with custom paging.

GridView Custom paging with PageSize change dropdown


The GridView is a very powerful control and has all the features including paging/sorting etc. But while using GridView in your project, you have to assign the PageSize property of the GridView programmatically, which users then cannot change. Sometimes, users require the feature to change the page size so that they could view more/less records per page. With one of my projects, I was asked to develop such a control with custom paging. I am sharing this with you so that you don't have to rework for such a control.

Using the code

The complete code and assemblies are attached with this article. You can download the MrllControlLib.dll and add a reference to it in your project. Once you add the control to your page, you can assign various properties in order to control the attribute set in the context menu. The following are some of the properties exposed:

  • ShowMrllCustomPaging boolean
  • CustomPagerCssClass
  • DefaultSortExpression

Note that if you have assigned ShowMrllCustomPaging=true, then the control will load all drop downs for paging, sorting (if the SortExpression is assigned) and the number of pages dropdown, otherwise it will work as a normal GridView. Also, make sure to handle all events like PageIndexChanging and OnSorting. I have added another event, OnPageSizeChanged, which is fired when the page-size drop down is changed. This event uses the PageSizeChangeEventArgs delegate and emits a new page-size value. The following is the implementation of the PageSizeChange event:

protected void gv1_PageSizeChange(object sender, PageSizeChangeEventArgs e) 
    gv1.PageSize= e.NewPageSize; 
    gv1.PageIndex = 0; 

The rest of the events like OnSorting/PageIndexChanging are the same as for the GridView.

About the code

The custom gridview control inherits from the .NET GridView control, and the OnRowCreated method is overriden in order to change the paging style. When there is more than one page, the default pager template is loaded. I clear all the controls in the pager template and add my controls for paging/sorting/the number of records drop down.

protectedd override OnRowCreated(GridViewRowEventArgs e) 
    if (e.Row.RowType == DataControlRowType.Pager) 
          //Code to Add various Dropdown 
          //Add control to Row 
          // oOutertab is table containg all dropdown and Lable 

Now, the problem is when there is only one page, the PagerTemplate will not be created, so how can I put the custom paging and sorting dropdown? The answer is add a row to the GridView at position zero (just above the header row). I have done this by adding a row when the header is created.

protected override void OnRowCreated(GridViewRowEventArgs e)
    if (e.Row.RowType == DataControlRowType.Header) 
        if (PageCount ==1) 
            GridViewRow PagerRow = base.CreateRow(-1, -1, 
               DataControlRowType.Pager, DataControlRowState.Normal); 
            //Add Your container of controls in this New row 
            PagerRow.Cells.Add(new TableCell()); 
            PagerRow.Cells[0].ColumnSpan = this.Columns.Count; 
            //Add the New row at Position 0 of GrdView 
            Table grid = (Table)this.Controls[0]; 
                                grid.Rows.AddAt(0, PagerRow); 

Now, there is another issue. Once you add a row at position zero, then it will have the style of the header-template, since we added this row while the header row was getting created. So, to apply the correct styling on the correct row, we need to assign CustomPagerCssClass to the pager template and HeaderStyleCssClass to the Header template (which is at position 1 now), or we can assign CSS on the RowCreated event before adding a new row at position zero.

GridViewRow PagerRow = base.CreateRow(-1, -1, 
    DataControlRowType.Pager, DataControlRowState.Normal); 
if (this.CustomPagerCssClass != string.Empty) 
      PagerRow.CssClass = this.CustomPagerCssClass; 
if (this.HeaderStyle.CssClass != string.Empty) 
      e.Row.CssClass = this.HeaderStyle.CssClass; 
//Now Add Pager Row at Position zero 
Table grid = (Table)this.Controls[0]; 
grid.Rows.AddAt(0, PagerRow);


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


About the Author

Saifi Hasan
India India
I have done Master Degree in Computers and MCAD and working on Microsoft technologie since last 4 yrs. Currently working with TCS (India).

Comments and Discussions

QuestionRelated to paging Pin
Pranjali Deshbhratar1-Aug-12 2:25
MemberPranjali Deshbhratar1-Aug-12 2:25 
QuestionOne Issue with this Control's Paging Pin
Brijesh Shah21-Nov-11 1:07
MemberBrijesh Shah21-Nov-11 1:07 
Generaldid you used stored procedure to fetch data or not Pin
imranslager17-May-10 5:08
Memberimranslager17-May-10 5:08 
GeneralThere was an error rendering the control. Object reference not to set an instance of an object. Pin
mandian23-Nov-09 1:13
Membermandian23-Nov-09 1:13 
GeneralRe: There was an error rendering the control. Object reference not to set an instance of an object. Pin
freezer277-May-14 12:01
Memberfreezer277-May-14 12:01 
GeneralGood article but it should have little improvemets Pin
fellippe31-Mar-09 0:47
Memberfellippe31-Mar-09 0:47 
Questioncan this be used in a form? Pin
mark chester goking13-Nov-08 19:51
Membermark chester goking13-Nov-08 19:51 
GeneralVery NICE! Thank You! Pin
Member 31061888-Nov-08 3:04
MemberMember 31061888-Nov-08 3:04 
GeneralRe: Very NICE! Thank You! Pin
ankitagarwalpa1-Sep-11 20:52
Memberankitagarwalpa1-Sep-11 20:52 
GeneralGood work Pin
Tittle Joseph31-Jul-08 0:24
MemberTittle Joseph31-Jul-08 0:24 
GeneralRe: Good work Pin
Saifi Hasan1-Aug-08 12:33
MemberSaifi Hasan1-Aug-08 12:33 
GeneralThere was an error rendering the control. Pin
Maclir30-Jul-08 9:04
MemberMaclir30-Jul-08 9:04 
Questioncan not run the demo Pin
Member 10419921-Jul-08 6:20
MemberMember 10419921-Jul-08 6:20 
AnswerRe: can not run the demo Pin
Member 10419921-Jul-08 9:29
MemberMember 10419921-Jul-08 9:29 
GeneralRe: can not run the demo Pin
Saifi Hasan24-Jul-08 13:05
MemberSaifi Hasan24-Jul-08 13:05 
GeneralCannot find column DESC Pin
wissam116-Jul-08 19:37
Memberwissam116-Jul-08 19:37 
GeneralRe: Cannot find column DESC [modified] Pin
Member 31061887-Nov-08 18:16
MemberMember 31061887-Nov-08 18:16 
GeneralSaifi great job Pin
wasimsharp5-Jun-08 0:04
Memberwasimsharp5-Jun-08 0:04 
Generalgreat job Pin
Member 39207367-May-08 19:41
MemberMember 39207367-May-08 19:41 
GeneralRe: great job Pin
Saifi Hasan9-May-08 2:38
MemberSaifi Hasan9-May-08 2:38 
GeneralRe: great job Pin
Saifi Hasan24-Jul-08 13:09
MemberSaifi Hasan24-Jul-08 13:09 
GeneralHi Friend Pin
rao_2117-May-08 4:40
Memberrao_2117-May-08 4:40 
GeneralRe: Hi Friend Pin
Saifi Hasan9-May-08 0:40
MemberSaifi Hasan9-May-08 0:40 
GeneralHi Buddy Pin
rao_2117-May-08 2:57
Memberrao_2117-May-08 2:57 
GeneralGud work buddy Pin
HemJoshi6-May-08 1:43
MemberHemJoshi6-May-08 1:43 

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.

Posted 5 May 2008


106 bookmarked