How to highlight sorted column of a GridView control in ASP.NET

In this article I will explain how to highlight sorted column of a GridView control in ASP.NET

Introduction

In this article I will explain how to highlight or select the column of an ASP.NET GridView control whose header has been clicked for sorting

Step 1:

Create a new ASP.NET Web Application and drag a GridView control on Default.aspx from the Toolbox. And enable Paging and Sorting as discussed in my last articles (GridView Paging and Sorting in ASP.NET using SqlDataSource or GridView Paging and Sorting in ASP.NET without using a DataSource)

Step 2:

Write following in RowDataBound event of GridView to highlight header of the column that has been clicked for sorting:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
     LinkButton lnkbtn;
     if (e.Row.RowType == DataControlRowType.Header)
     {
          foreach (TableCell cell in e.Row.Cells)
          {
               lnkbtn = (LinkButton)cell.Controls[0];
               if (!string.IsNullOrEmpty(GridView1.SortExpression))
               {
                    if (GridView1.SortExpression.Equals(lnkbtn.Text))
                    {
                         cell.BackColor = System.Drawing.Color.Crimson;
                    }
               }
          }
     }
}

GridView RowDataBound event is fired when a row of the GridView has been filled with data. It is fired for every row of the GridView including its header and footer.

Here first we check if the current row is a header row by checking RowType property. Then we loop through all the cells in the header row. Each cell is casted in a LinkButton control as when sorting is enabled, headers of the GridView turns into LinkButton control. Then we check if the GridView column header has been clicked for sorting using GridView.SortExpression property. Then we set background color of the cell whose text matches the SortExpression (Column text that was clicked for sorting)

Step 3:

Write following code in DataBound event of the GridView control to highlight other rows data of the sorted column:

protected void GridView1_DataBound(object sender, EventArgs e)
{
     int sortedColumnPosition = 0;
     LinkButton lnkbtn;

     // Gets position of column whose header text matches SortExpression
     // of the GridView when column is sorted
     foreach (TableCell cell in GridView1.HeaderRow.Cells)
     {
          lnkbtn = (LinkButton)cell.Controls[0];
          if (lnkbtn.Text == GridView1.SortExpression)
          {
               break;
          }
          sortedColumnPosition++;
     }

     if (!string.IsNullOrEmpty(GridView1.SortExpression))
     {
          foreach (GridViewRow row in GridView1.Rows)
          {
               row.Cells[sortedColumnPosition].BackColor = System.Drawing.Color.LavenderBlush;
          }
     }
}

GridView DataBound event is fired when all the data is bound to the GridView.

Here, first we calculate position of the sorted column. Then first we check if the GridView has been clicked for sorting using GridView.SortExpression property then we loop through rows of the GridView and set background color of the cell at sorted column position.

Output:

When you sort GridView by clicking on its header, then its header along with its data in each row will be highlight like following

3 thoughts on “How to highlight sorted column of a GridView control in ASP.NET

  1. Kellye

    wonderful submit, very informative. I wonder why the opposite specialists of this
    sector don’t realize this. You should proceed your writing.
    I am confident, you have a great readers’ base already!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *