ASP.NET C# Change GridView Cell Background Color Based on Value

by John Chapman | Jul 21, 2010 | SharePoint | 12 comments

On of the useful things you can do with GridViews in ASP.NET is to run code during the rendering of each individual row. This allows you to change aspects, such as visual appearance, of each row based on the values of the cells. For instance, you can change the background color of the cell based on the value:

To accomplish this, you simply need to add a function to the “RowDataBound” attribute of the GridView.

GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);

void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
	if (e.Row.RowType == DataControlRowType.DataRow)
	{
		int value = (int)DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text); 
		// e.Row.Cells[2] references the cell value you want to use
		if (value < 100)
		{
			e.Row.Cells[2].BackColor = Color.FromName("#c6efce");
		}
		if ((value >= 100) && (value < 500))
		{
			e.Row.Cells[2].BackColor = Color.FromName("#ffeb9c");
		}
		if (value >= 500)
		{
			e.Row.Cells[2].BackColor = Color.FromName("#ffc7ce");
		}
	}
}

GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);

void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

int value = (int)DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text);

// e.Row.Cells[2] references the cell value you want to use

if (value < 100)

{

e.Row.Cells[2].BackColor = Color.FromName("#c6efce");

}

if ((value >= 100) && (value < 500))

{

e.Row.Cells[2].BackColor = Color.FromName("#ffeb9c");

}

if (value >= 500)

{

e.Row.Cells[2].BackColor = Color.FromName("#ffc7ce");

}

In this example, I took the value of the 3rd cell of the row (“e.Row.Cells[2]”) and changed the background color of the cell based on the value.

12 Comments

J Morris on August 6, 2010 at 10:39 am

How would you code the page if you were using a String value in the Column cell?
Reply
John Chapman on August 6, 2010 at 10:43 am

string value = DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text);

if (value == “some string”)
{

}

You might have to add ToString() at the end if it doesn’t work automatically: string value = DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text).ToString();
Reply
J Morris on August 6, 2010 at 12:43 pm

Thanks! I will try it out.
Reply
Stu on March 31, 2011 at 7:13 am

Nice job of presenting a very useful feature. I code in VB and have figured the differences for all the code except what you show in your line 01.

I’m not sure where I would put that line in my code-behind or if in VB I even need it. I have the rest of the code written and it proves to be ok but I get the following error whenever I run the code. System.Data.DataRowView does not contain a property with the name ‘RfS’. “RfS” is the text that is in the cell that the code should be setting the format for.

The only consideration that I can see that might make a difference is that the DataSource for the GridView is created and assigned with a DataTable at the Page_Load of this page.

Any ideas would sure be appreciated.

Thanks again for your sample.
Reply
- days on March 8, 2012 at 6:22 pm
  
  we have the same problem.. anybody got the solution
  Reply
shevi on September 15, 2011 at 11:09 pm

Good post.. but its from server-side, isn’t it.

You can do it in client side and reduce the weight on server

its too easy with JavaScript. I found this in a blog site

http://howsharepoint.blogspot.com/2011/09/javascript-to-color-gridview-cells.html
Reply
- John Chapman on September 16, 2011 at 10:50 am
  
  Yes, this is from the server side. You could go either way, depends on the needs at hand. Doing it on the client side requires additional scripts to load and run in the web browser, whereas a server-side solution does it before its sent to the client.
  Reply
Pravesh Singh on January 5, 2012 at 7:32 am

Very informative post. It’s really helpful for me and helped me lot to complete my task.

Thanks for sharing with us. I had found another nice post over the internet which was

also explained very well about GridView Decoration in ASP.Net, for

more details of this post check out this link…

http://mindstick.com/Articles/0efe2da6-407e-4442-a675-475bd6f8a2d7/?GridView%20Decoration%20in%20ASP.Net

Thanks
Reply
Narendran on January 11, 2012 at 11:41 pm

THANKS A LOT, IT HELPS A MORE.

Narendran

Tweet me @MyNaren
Reply
bartek4c on January 16, 2012 at 4:15 am

Hi,

I was trying to implement this example in my project and have some problems. Could you please help me by any chance? I am using the datasource and databind method to fill my gridview with data. Does it mean I can’t use your technique?

my code is:

…

dapter.Fill(ds, “projects”);

grdProjects.DataSource = ds;

grdProjects.DataBind();

grdProjects.RowDataBound += new GridViewRowEventHandler(grdProjects_RowDataBound);

con.Close();

but the grdProjects_RowDataBound is not being fired

Any idea why?

Thanks,

Bartosz
Reply
grievesy on January 28, 2012 at 2:25 pm

I have something similar working for text forecolor.. But it doesnt seem to work on iPhone. Has anyone else noticed the problem? iPad seems fine.

Cheers
Reply
days on March 8, 2012 at 7:45 pm

How coulld I change the cell background if the value is string. Example column ‘Priority’ and the value for each row is high, medium, and low. If ‘high’ the cell background is blue. if ‘red’ the cell background is ‘bleu’ and if it is ‘low’ the cell background is white.. anybody can help.
Reply