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!