GridView Paging And Sorting

In this post I will try to explain how you can apply paging and sorting on the grid view control. Most of the developer use the paging and sorting when they have used the grid view control in there web application.For this example I have a grid view control only in my web page. I have used the XML to store the data which is displayed in the grid view control. Detail related to the paging and sorting functionality will be provided as they are used in the example.

Grid View Paging:

In order to perform page functionality in the grid view control what you have to do is to set the AllowPaging property to true for the grid view control.By default, the GridView control displays 10 records on a page at a time. You can change the number of records displayed on a page by setting the PageSize property.When paging is enabled, an additional row called the pager row is automatically displayed in the GridView control. The pager row contains controls that allow the user to navigate to the other pages. You can control the settings of the pager row (such as the pager display mode, the number of page links to display at a time, and the pager control's text labels) by using the PagerSettings property. The pager row can be displayed at the top, bottom, or both the top and bottom of the control by setting the Position property. You can also select from one of four built-in pager display modes by setting the Mode property. The following table describes the built-in display modes. (Source)

Member Name
Description
PagerButton.NextPrevious
A set of pagination controls consisting of previous and next buttons.
PagerButton.NextPreviousFirstLast
A set of pagination controls consisting of previous, next, first, and last  buttons.
PagerButton.Numeric
A set of pagination controls consisting of numbered link buttons to access  pages directly.
PagerButton.NumericFirstLast
A set of pagination controls consisting of numbered and first and last link  buttons.

In the above list of pager Button mod the Numeric is the default mod applied when you set the allowpaging property of the grid view control to true.The grid view control automatically hide the pager row if there is one page record int the data source of the grid view. Here is the list of event which are provided by the grid view control when paging action is occur in the grid view control.

1. PageIndexChanged: Occurs when one of the pager buttons is clicked, but after the GridView control handles the paging operation. This event is commonly used when you need to perform a task after the user navigates to a different page in the control.
2. PageIndexChanging: Occurs when one of the pager buttons is clicked, but before the GridView control handles the paging operation. This event is often used to cancel the paging operation.

In the above list you can see that PageIndexChanged event is occurred after the grid view control handles the paging operation. So to handle the paging we need the PageIndexChanging event in order to perform the functionality which is necessary for handling the paging manually. So in my code example I have used the PageIndexChanging event of the grid view control. So when the any of the paging button is click I got the control to perform the manual paging on grid view control. In the PageIndexChanging event handler what I did is to call the SortDataTable function, which will sort the records. Then in the next statement the PageIndex property of the grid view control is assign the new value by using the argument of the function which is e.NewPageIndex which hold the new value of the page index( the page value , which user has clicked on the grid pager row).

protected void grdvResultGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdvResultGrid.DataSource = SortDataTable(GetGridDataTable(), true);
grdvResultGrid.PageIndex = e.NewPageIndex;
grdvResultGrid.DataBind();
}

protected DataView SortDataTable(DataTable ptblDataTable, Boolean pblnIsPageIndexChanging)
{
if (ptblDataTable != null)
{
DataView dataView = new DataView(ptblDataTable);
if (GridViewSortExpression != string.Empty)
 if (pblnIsPageIndexChanging)
    dataView.Sort = string.Format("{0} {1}", GridViewSortExpression, GridViewSortDirection);
 else
    dataView.Sort = string.Format("{0} {1}", GridViewSortExpression, GetSortDirection());
return dataView;
}
else     
  return new DataView();
}

In the PageIndexChanging event handler I have called the SortDataTable function which take the data table and Boolean value, the Boolean parameter which is self describing is used for paging and sorting purpose, if the value of the parameter is true then sort the data on previous sorting value which can be either "ASC" (ascending) or "DESC" (descending). For sorting purpose I have used the DataView and then call the sort property of the DataView which will take the sort expression of column name following by sort order. In the above code We can sort the record by only one column, if you want to sort the records by multiple column names then you can combine the column names by separating them with comma (,) sign.

Grid View Sorting:

In order to achieve the sorting in the grid view control what you have to do is to set the AllowSorting property of the grid view control to true. When sorting is enabled, the heading text for each column field with its SortExpression property set is displayed as a link button. The SortExpression property for an automatically generated columns field is automatically populated. If you define your own columns through the Columns collection, you must set the SortExpression property for each column; otherwise, the column will not display the link button in the header. Clicking the link button for a column causes the items in the grid view control to be sorted based on the sort expression. Typically, the sort expression is simply the name of the field displayed in the column, which causes the grid view control to sort with respect to that column. Like the grid view paging I have used the sorting event handler for the sorting purpose.

protected void grdvResultGrid_Sorting(object sender, GridViewSortEventArgs e)
{
GridViewSortExpression = e.SortExpression;
int pageIndex = grdvResultGrid.PageIndex;
grdvResultGrid.DataSource = SortDataTable(GetGridDataTable(), false);
grdvResultGrid.DataBind();
grdvResultGrid.PageIndex = pageIndex;
}

Above is the code for the grid view sorting. I have used two view state to store the sort expression and the sort direction so that when page is post back the value are not reinitialized and these view state values are used to sort the grid view records when user change the page number of the grid view control, so that user can see the sorted order record in the grid view control. In the sorting event handler of the grid view control I have called the SortDataTable function but in this time the second parameter which is of Boolean type is passed the value false, mean the sort direction value will be changed this time and the function GetSortDirection() will be called to get the alternative value for the sort direction, So if the sort direction is Asc then it will change to the desc by looking at the value of the sort direction view state.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!