Couple of weeks ago I wrote two articles which explained column sorting scenario for the GridView control. I explained sorting bound columns and also auto-generated columns. One important point which I left out was how to remember that which column was sorted. Consider a scenario in which you have 10 columns and you sort the GridView by using one column but after some time you forgot that which column was used for sorting. In this article I will explain that how you can change the column color of the row whose header was clicked for sorting. Please note this article does not discuss sorting.

Introduction:

Couple of weeks ago I wrote two articles which explained column sorting scenario for the GridView control. I explained sorting bound columns and also auto-generated columns. One important point which I left out was how to remember that which column was sorted. Consider a scenario in which you have 10 columns and you sort the GridView by using one column but after some time you forgot that which column was used for sorting. In this article I will explain that how you can change the column color of the row whose header was clicked for sorting. Please note this article does not discuss sorting.

Populating the GridView Control:

Our first task is to populate the GridView control. Take a look at the simple method which pulls the information from the Northwind database and populates the GridView.

private string columnName = String.Empty; private void BindData() { SqlConnection myConnection = new SqlConnection("Server=localhost;Database=Northwind;Trusted_Connection=true"); SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection); DataSet ds = new DataSet(); ad.Fill(ds); gv.DataSource = ds; gv.DataBind(); }

Setting the GridView in Sorting Mode:

Next, step is to set up the GridView control so that the headers of the GridView will render as links for sorting. Take a look at the simple HTML code below which is used to create the GridView.

<asp:GridView ID="gv" AllowSorting="true" runat="server" OnRowDataBound="gv_RowDataBound" OnSorted="gv_Sorted" OnSorting="gv_Sorting" />

As, you have already noticed that the AllowSorting attribute is set to true which renders the GridView headers as clickable links. Our next step is to implement the gv_Sorted event. 

protected void gv_Sorting(object sender, GridViewSortEventArgs e) { // You can implement the Sorting method on your own I have already // discussed sorting in my previous articles columnName = e.SortExpression; BindData(); }

The columnName variable will now contain the column name of the GridView header clicked. Our, next and final step is to implement the gv_RowDataBound event which is fired when the rows are bound to the GridView control.

GridView RowDataBound Method:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { DataRowView drv = (DataRowView)e.Row.DataItem; for (int i = 0; i < drv.DataView.Table.Columns.Count; i++) { if (drv.DataView.Table.Columns[i].ColumnName.Equals(this.columnName)) { e.Row.Cells[i].BackColor = System.Drawing.Color.LawnGreen; } } } }

All the magic happens inside the gv_RowDataBound method. By using the DataRowView object I get the view of the DataRow which is contained inside the GridView control.  Next, I iterate through the columns until I find the column with the same name as that of the column which was clicked. Once, I found that column I change the backcolor of the cell. The changing of this color will happens for each and every cell till all cells are painted.

In the screenshot below I clicked on the description column and as you can see that the description column is colored.

I hope you liked the article, happy coding!