Gridview Row Backcolor in ASP.NET

Introduction

I am writing in this article how to change row color of Gridview on the condition basis. Gridview is used to display data in tabular form. ASP.Net provides flexibility Grdiview to perform numerous operations, we can play data as per our requirement and finally can display in GUI Gridview Server Control.   

Define Gridivew in ASPX page

In ASPX page, here I am defining Gridview server control to display data, we can define here height, width of Gridview, also with styling.

Calling Method on Page Load

On page load, I am calling method BindGridview(), where I bind data to Gridview control.

if (!Page.IsPostBack)
{
   // Calling method to bind gridview
   BindGridview();
}

Binding Data to Gridview

Here I am adding data to Datatable then binding Datatable to Gridview.

using System.Data;

private void BindGridview()
{
        // declaring datatable
 DataTable _dt_TC_Grd_color = new DataTable();
       
 // add column to datatable
 _dt_TC_Grd_color.Columns.Add("Row_no", typeof(Int32));
 _dt_TC_Grd_color.Columns.Add("Fruit_Name", typeof(string));
 _dt_TC_Grd_color.Columns.Add("Price", typeof(Decimal));

 // assigning value
 _dt_TC_Grd_color.Rows.Add(1, "Orange", 10);
 _dt_TC_Grd_color.Rows.Add(2, "Apple",20);
 _dt_TC_Grd_color.Rows.Add(3, "Mango",30);
 _dt_TC_Grd_color.Rows.Add(4, "Banana", 40);
 _dt_TC_Grd_color.Rows.Add(4, "Papaya", 50);
 _dt_TC_Grd_color.Rows.Add(4, "Guava", 60);

 // binding datatable to gridview control
 grdBackgroundColor.DataSource = _dt_TC_Grd_color;
 grdBackgroundColor.DataBind();
}

Changing Gridview Row Back Color to Yellow

Here I am changing Gridview back color to yellow on the condition basis where price is less than 20.

  decimal price = decimal.Parse(e.Row.Cells[2].Text);

  // change row color to yellow
  if (price < 20)
  {
     e.Row.BackColor = System.Drawing.Color.Yellow;
  }

    

Changing Gridview Row Back Color to Blue

Here I am changing Gridview back color to blue where price greater than twenty and price less than equal to forty.

 // change row color to blue
 if (price > 20 && price <= 40)
 {
    e.Row.BackColor = System.Drawing.Color.Blue;
 }

Changing Gridview Row Back Color to Red

Here I am changing Gridview back color to Red where price greater than forty.

     

// change row color to red
if (price > 40)
{
  e.Row.BackColor = System.Drawing.Color.Red;
}

Gridview RowDataBound Event Firing

Here is complete view of RowDataBound, where we have applied conditions to price to change the color of rows Yellow, Blue, Red etc.

protected void grdBackgroundColor_RowDataBound(object sender, GridViewRowEventArgs e)
{
 // checking for gridview row
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
     decimal price = decimal.Parse(e.Row.Cells[2].Text);

     // change row color to yellow
     if (price < 20)
     {
        e.Row.BackColor = System.Drawing.Color.Yellow;
     }
    
     // change row color to blue
     if (price > 20 && price <= 40)
     {
       e.Row.BackColor = System.Drawing.Color.Blue;
     }

     // change row color to red
     if (price > 40)
     {
       e.Row.BackColor = System.Drawing.Color.Red;
     }
 }
}

Conclusion

Now Rows are changed according to condition i.e. Yellow, Blue and Red. In the same way, we can apply conditions to change row back color.

Download Sample in Zip Format

Suggested Reading

• Interface class c#
• What is the difference between a mutable and immutable string in C#?
• What is the difference between an interface and abstract class
• Jquery Timer Countdown in MVC Application