ASP.NET DataGrid: Conditionally Coloring Cell Background Color for a Column Based on the Cell Contents

If you are writing a report using a .NET DataGrid, it’s very possible that you’ll want to conditionally highlight key data in the report. For example, you’ll possibly want to color the background of a cell yellow to highlight that the data is over a certain threshold (ie: if a date value is older than today’s date, or if a number is over a certain value). The way the DataGrid control is used doesn’t immediately make it obvious how to handle this.

How to Programmatically Control Cell Properties

If you have a .NET DataGrid component and you want to change the attributes of the cells in a column depending on the data (like changing the background color), you can do so in the ItemDataBound event. Specifically, the ItemDataBound event as each row of your grid is rendered. Then you can programmatically loop through each column in the row results, and then check if you want to perform an action based on the data in the colum that you are interested in.

Example Code (in VB.NET)

Below is an example of how you might control the background color of table cells for a percentage column and a Date column. We use the DataGrid’s ItmeDataBound event where we can control cell properties as the grid renders. In this case we make sure the data in the relevant columns is in the format we expect (either a proper date or a proper integer).

1. First we compare the date with today’s date, and change the cell’s background color to Salmon if the date is a day or more in the past.
2. Secondly, we check the numeric value in the Percent column. If it is a valid number, then we’ll highlight each cell in green that is 60% or higher.

Sub TestDataGrid_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
' Check that the type of row being affected is a valid data row (ie: not a header or a footer)
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
Dim iterCol As Integer
' Loop through the cells of the row being rendered
For iterCol = 0 To e.Item.Cells.Count - 1
Dim dv As DataRowView = CType(e.Item.DataItem, DataRowView)
' This is how you can tell what column the current cell belongs to
Dim strColName As String = dv.DataView.Table.Columns(iterCol).ColumnName
' Here is how you make sure you are affecting data in the two columns you want to adjust
If ("Test Date").Equals(strColName) Then
' This will highlight any date in the Test Date column that is one or more days in the past
Dim dtTestDate As DateTime
' Test that the cell value text is a valid date
If Date.TryParse(e.Item.Cells(iterCol).Text, dtTestDate) Then
' Test that the cell value date is at least a day less than the current date
If DateDiff(DateInterval.Day, DateTime.Now, dtTestDate) < 0 Then e.Item.Cells(iterCol).Style.Add("background-color", "Salmon") End If End If ElseIf ("Percent").Equals(strColName) Then ' This will highlight any number in the Percent column where the percentage is greater or equal to 60% Dim intTestPct As Int32 ' Test that the cell value text is a valid integer If Integer.TryParse(e.Item.Cells(iterCol).Text, intTestPct) Then ' Test that the cell value integer is greater than 59 percent If intTestPct > 59 Then
e.Item.Cells(iterCol).Style.Add("background-color", "#7FFF8E")
End If
End If
End If
Next
End If
End Sub