I have seen questions about how to change the background or text color of a column within a GridView control’s row when a value is either null or empty or a value is greater than another value etc. So I decided to blog about how to change the style of a column.
Note: The GridView control is a control that will be shipped with ASP.Net 2.0.
The best way of changing the style of a column based on a columns value, is by hook up to the GridView’s RowDataBound event. The RowDataBound event will be executed directly after the row is data bounded. The RowDataBound event uses the GridViewRowEventArgs class as the event argument. With the event’s argument you can get the current row that has been data bound by using the GridViewRowEventArgs’s Row property:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
GridViewRow row = e.Row;
}
The Row property will return a GridViewRow object that inherits the TableRow class.
There are different types of rows that could be data bound such as, DataRow, EmptyDataRow, Footer, Header, Pager and Separator. To know which type that is currently data bounded, you can use the GridViewRow’s RowType property. The RowType property is an enum of type DataControlRowType. The following code checks if the type of the Row is a standard row that will be listed in the GridView:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Do something!
}
}
To get the cells of the row, you can use the Cells property that will return a TableCellCollection object. To get a specific cell, you can use the TableCellCollection indexer. The TableCellColleciton indexer will return a TabelCell object, which will represent a cell in the row:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TableCell cell = e.Row.Cells[0];
}
}
To get the value from a TableCell, you can use the TableCell’s Text property:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string value = e.Row.Cells[0].Text;
}
}
Now when you got the basic understanding of getting the value from a cell within a row, you can easy change the style of a TabelCell based on the cell’s value. The following code will query the “Alphabetical list of products“ table from the Northwind database, and change the background color to red for a column when the fourth cell (That will be the “UnitPrice” column) is greater than 10:
<%@ Page Language="C#"%>
<%@ Import Namespace="System.Drawing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (Decimal.Parse(e.Row.Cells[3].Text) > 10)
e.Row.Cells[3].BackColor = Color.Red;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
DataKeyNames="ProductID" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField ReadOnly="True" HeaderText="ProductID" InsertVisible="False" DataField="ProductID"
SortExpression="ProductID" />
<asp:BoundField HeaderText="ProductName" DataField="ProductName" SortExpression="ProductName" />
<asp:BoundField HeaderText="QuantityPerUnit" DataField="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField HeaderText="UnitPrice" DataField="UnitPrice" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice] FROM [Alphabetical list of products]"
ConnectionString="Server=(local);Database=Northwind;User id=sa;Password=;" />
</div>
</form>
</body>
</html>