GridView Custom Paging with PageSize Change Dropdown

• Download demo project - 39.5 KB
• Download source - 11 KB

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