Showing a Sort Order Indicator in Header of GridView control of ASP .NET 2.0

It doesn't take a whole lot of effort to provide sorting on columns in a GridView control of ASP .NET 2.0. However, it does not have built-in support for showing an icon or an image to indicate the column on which the table is sorted and the order in which it is sorted.

To enable sorting and to show a sort order indicator in the column header of a GridView, the following things need to be done:

1. In the .aspx page, define event handlers for "OnSorting" and "OnRowCreated" events. The OnSorting event gets called whenever the grid is sorted by clicking on a column header and OnRowCreated event is called when a row in the grid gets created. Also set the "AllowSorting" attribute to true. The following code snippet shows the attributes of the GridView control:

AllowSorting="True" OnSorting="gridViewInvoiceSearchResult_OnSort" OnRowCreated="gridViewInvoiceSearchResult_OnRowCreated"

2. Write the event handlers for OnSorting and OnRowCreated events in the code-behind page.

3. The GridViewSortEventArgs parameter passed to the OnSorting event handler contains the sort direction (ascending or descending) and the sort expression (used to identify the column on which the sorting is done. A particular column in the GridView can be associated with a SortExpression while defining the binding of the column to a particular data field). Store these values in member variables declared within the code-behind page.

4. In the OnRowCreated event, use the SortExpression and SortDirection values stored earlier to determine which image to add and which column to add it to. The following code snippet shows the OnRowCreated event handler:

protected void gridViewInvoiceSearchResult_OnRowCreated(object sender, GridViewRowEventArgs e)
{
// Check whether the row is a header row
if (e.Row.RowType == DataControlRowType.Header)
{
// m_SortExp is the sort expression stored in the OnSorting event handler
if (String.Empty != m_SortExp)
{
// Based on the sort expression, find the index of the sorted column
int column = GetSortColumnIndex(this.gridViewInvoiceSearchResult, m_SortExp);
if (column != -1)
// Add an image to the sorted column header depending on the sort direction
AddSortImage(e.Row, column, m_SortDirection);
}
}
}

// Method to get the index of the sorted column based on SortExpression

private int GetSortColumnIndex(GridView gridView, String sortExpression)
{
if (gridView == null)
return -1;
foreach (DataControlField field in gridView.Columns)
{
if (field.SortExpression == sortExpression)
{
return gridView.Columns.IndexOf(field);
}
}
return -1;
}

// Method to add the sort icon to the column header

private void AddSortImage(GridViewRow headerRow, int column, SortDirection sortDirection)
{
if (-1 == column)
{
return;
}
// Create the sorting image based on the sort direction.
Image sortImage = new Image();
if (SortDirection.Ascending == sortDirection)
{
sortImage.ImageUrl = "~/down.gif";
sortImage.AlternateText = "Ascending order";
}
else
{
sortImage.ImageUrl = "~/up.gif";
sortImage.AlternateText = "Descending order";
}
// Add the image to the appropriate header cell.
headerRow.Cells[column].Controls.Add(sortImage);
}