In this article I will explain how to dynamically change GridView Cell Background Color based on condition in ASP.Net using C# and VB.Net.
The GridView Cell’s background color will be dynamically changed based on its value in the RowDataBound event of GridView.
 
 
GridView HTML Markup
The following HTML markup consists of an ASP.Net GridView consisting of two BoundField columns.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound = "OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" ItemStyle-Width = "100"/>
        <asp:BoundField DataField="Quantity" HeaderText="Quantity" ItemStyle-Width = "100"/>
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Drawing;
 
VB.Net
Imports System.Data
Imports System.Drawing
 
 
Binding the ASP.Net GridView control
I have created a dynamic DataTable with some dummy data and it is used to populate the GridView control in the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Quantity") });
        dt.Rows.Add("Shirt", 145);
        dt.Rows.Add("Jeans", 0);
        dt.Rows.Add("Trousers", 190);
        dt.Rows.Add("Tie", 30);
        dt.Rows.Add("Cap", 0);
        dt.Rows.Add("Hat", 90);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Item"), New DataColumn("Quantity")})
        dt.Rows.Add("Shirt", 145)
        dt.Rows.Add("Jeans", 0)
        dt.Rows.Add("Trousers", 190)
        dt.Rows.Add("Tie", 30)
        dt.Rows.Add("Cap", 0)
        dt.Rows.Add("Hat", 90)
        dt.Rows.Add("Scarf", 290)
        dt.Rows.Add("Belt", 150)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Changing the Background color of GridView Row as per condition dynamically
Inside the OnRowDataBound event handler of the GridView, the Cell value is compared with different quantity ranges and based on the following quantity range values, the background color of the GridView Cell will change.
Quantity Range
Background Color
0
RED
1 - 50
YELLOW
51 - 100
ORANGE
 
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TableCell cell = e.Row.Cells[1];
        int quantity = int.Parse(cell.Text);
        if (quantity == 0)
        {
            cell.BackColor = Color.Red;
        }
        if (quantity > 0 && quantity <= 50)
        {
            cell.BackColor = Color.Yellow;
        }
        if (quantity > 50 && quantity <= 100)
        {
            cell.BackColor = Color.Orange;
        }
    }
}
 
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim cell As TableCell = e.Row.Cells(1)
        Dim quantity As Integer = Integer.Parse(cell.Text)
 
        If quantity = 0 Then
            cell.BackColor = Color.Red
        End If
        If quantity > 0 AndAlso quantity <= 50 Then
            cell.BackColor = Color.Yellow
        End If
        If quantity > 50 AndAlso quantity <= 100 Then
            cell.BackColor = Color.Orange
        End If
    End If
End Sub
 
 
Screenshot
Dynamically change GridView Cell Background Color based on condition in ASP.Net using C# and VB.Net
 
 
Demo
View Demo
 
 
Downloads

Download Code