Dynamically change GridView Cell Background Color based on condition in ASP.Net using C#

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;

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.

 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();  
   }  
 }  

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.

 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;  
     }  
   }  
 }