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

GridView Custom Paging with PageSize Change Dropdown

, 5 May 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
A GridView control with custom paging.

GridView Custom paging with PageSize change dropdown

Introduction

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; 
    BindGrid(); 
}

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) 
    { 
          e.Row.Cells[0].Controls.Clear(); 
          //Code to Add various Dropdown 
          //Add control to Row 
          // oOutertab is table containg all dropdown and Lable 
          
          e.Row.Cells[0].Controls.Add(oOutertab); 
    }
}

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].Controls.Add(oTab);  
            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);

License

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

Share

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 PinmemberPranjali Deshbhratar1-Aug-12 2:25 
As its showing record numbers like "Showing 1-5 of 20" in some cases it shows 1-5 of 0 mostly after selected index changed.
 
Please let me know the solution for it as soon as possible.
QuestionOne Issue with this Control's Paging PinmemberBrijesh Shah21-Nov-11 1:07 
Generaldid you used stored procedure to fetch data or not Pinmemberimranslager17-May-10 5:08 
GeneralThere was an error rendering the control. Object reference not to set an instance of an object. Pinmembermandian23-Nov-09 1:13 
GeneralRe: There was an error rendering the control. Object reference not to set an instance of an object. Pinmemberfreezer277-May-14 12:01 
GeneralGood article but it should have little improvemets Pinmemberfellippe31-Mar-09 0:47 
Questioncan this be used in a form? Pinmembermark chester goking13-Nov-08 19:51 
GeneralVery NICE! Thank You! PinmemberMember 31061888-Nov-08 3:04 
GeneralRe: Very NICE! Thank You! Pinmemberankitagarwalpa1-Sep-11 20:52 
GeneralGood work PinmemberTittle Joseph31-Jul-08 0:24 
GeneralRe: Good work PinmemberSaifi Hasan1-Aug-08 12:33 
GeneralThere was an error rendering the control. PinmemberMaclir30-Jul-08 9:04 
Questioncan not run the demo PinmemberMember 10419921-Jul-08 6:20 
AnswerRe: can not run the demo PinmemberMember 10419921-Jul-08 9:29 
GeneralRe: can not run the demo PinmemberSaifi Hasan24-Jul-08 13:05 
GeneralCannot find column DESC Pinmemberwissam116-Jul-08 19:37 
GeneralRe: Cannot find column DESC [modified] PinmemberMember 31061887-Nov-08 18:16 
GeneralSaifi great job Pinmemberwasimsharp5-Jun-08 0:04 
Generalgreat job PinmemberMember 39207367-May-08 19:41 
GeneralRe: great job PinmemberSaifi Hasan9-May-08 2:38 
GeneralRe: great job PinmemberSaifi Hasan24-Jul-08 13:09 
GeneralHi Friend Pinmemberrao_2117-May-08 4:40 
GeneralRe: Hi Friend PinmemberSaifi Hasan9-May-08 0:40 
GeneralHi Buddy Pinmemberrao_2117-May-08 2:57 
GeneralGud work buddy PinmemberHemJoshi6-May-08 1:43 

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 | Mobile
Web01 | 2.8.141015.1 | Last Updated 5 May 2008
Article Copyright 2008 by Saifi Hasan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid