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

GridView Custom Paging with PageSize Change Dropdown

Rate me:
Please Sign up or sign in to vote.
4.84/5 (29 votes)
5 May 2008CPOL2 min read 229.2K   11.5K   106   28
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:

C#
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.

C#
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.

C#
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.

C#
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)


Written By
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
Pranjali Deshbhratar1-Aug-12 2:25 
QuestionOne Issue with this Control's Paging Pin
Brijesh Shah21-Nov-11 1:07
Brijesh Shah21-Nov-11 1:07 
Generaldid you used stored procedure to fetch data or not Pin
imranslager17-May-10 5:08
imranslager17-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
mandian23-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
freezer277-May-14 12:01 
GeneralGood article but it should have little improvemets Pin
fellippe31-Mar-09 0:47
fellippe31-Mar-09 0:47 
Questioncan this be used in a form? Pin
mark chester goking13-Nov-08 19:51
mark chester goking13-Nov-08 19:51 
GeneralVery NICE! Thank You! Pin
Member 31061888-Nov-08 3:04
Member 31061888-Nov-08 3:04 
GeneralRe: Very NICE! Thank You! Pin
ankitagarwalpa1-Sep-11 20:52
ankitagarwalpa1-Sep-11 20:52 
GeneralGood work Pin
Tittle Joseph31-Jul-08 0:24
Tittle Joseph31-Jul-08 0:24 
GeneralRe: Good work Pin
Saifi Hasan1-Aug-08 12:33
Saifi Hasan1-Aug-08 12:33 
GeneralThere was an error rendering the control. Pin
Maclir30-Jul-08 9:04
Maclir30-Jul-08 9:04 
Questioncan not run the demo Pin
Member 10419921-Jul-08 6:20
Member 10419921-Jul-08 6:20 
AnswerRe: can not run the demo Pin
Member 10419921-Jul-08 9:29
Member 10419921-Jul-08 9:29 
GeneralRe: can not run the demo Pin
Saifi Hasan24-Jul-08 13:05
Saifi Hasan24-Jul-08 13:05 
GeneralCannot find column DESC Pin
wissam116-Jul-08 19:37
wissam116-Jul-08 19:37 
GeneralRe: Cannot find column DESC [modified] Pin
Member 31061887-Nov-08 18:16
Member 31061887-Nov-08 18:16 
GeneralSaifi great job Pin
wasimsharp5-Jun-08 0:04
wasimsharp5-Jun-08 0:04 
Generalgreat job Pin
Member 39207367-May-08 19:41
Member 39207367-May-08 19:41 
sorting is not working for me..

Property or indexer 'System.Web.UI.WebControls.GridView.SortDirection' cannot be assigned to -- it is read only
what could be the reason

thanks
Nawal
GeneralRe: great job Pin
Saifi Hasan9-May-08 2:38
Saifi Hasan9-May-08 2:38 
GeneralRe: great job Pin
Saifi Hasan24-Jul-08 13:09
Saifi Hasan24-Jul-08 13:09 
GeneralHi Friend Pin
rao_2117-May-08 4:40
rao_2117-May-08 4:40 
GeneralRe: Hi Friend Pin
Saifi Hasan9-May-08 0:40
Saifi Hasan9-May-08 0:40 
GeneralHi Buddy Pin
rao_2117-May-08 2:57
rao_2117-May-08 2:57 
GeneralGud work buddy Pin
HemJoshi6-May-08 1:43
HemJoshi6-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.