Navigation

Gridview Row Backcolor in ASP.NET

Gridview, Datagrid, Datalist, datatable, e.Row.BackColor, RowDataBound

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.

Form

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


Gridview yellow row color

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 red row color


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

Download Sample

Suggested Reading

Share
Next
Newer Post
Previous
This is the last post.

Anjan Kant

Outstanding journey in Microsoft Technologies (ASP.Net, C#, SQL Programming, WPF, Silverlight, WCF etc.), client side technologies AngularJS, KnockoutJS, Javascript, Ajax Calls, Json and Hybrid apps etc. I love to devote free time in writing, blogging, social networking and adventurous life

Post A Comment:

0 comments: