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

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

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.

John Chapman

Hello, I'm John Chapman. I am a SharePoint Developer for Sitrion (formerly NewsGator) living in Denver, Colorado. I develop solutions using SharePoint and .NET, and I thrive on the challenge of writing code to overcome the impossible, annoying, or otherwise difficult obstacles.

More Posts - Website - Twitter - LinkedIn - Google Plus

  • J Morris

    How would you code the page if you were using a String value in the Column cell?

  • http://www.sharepointjohn.com John Chapman

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

  • J Morris

    Thanks! I will try it out.

  • Stu

    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.

    • days

      we have the same problem.. anybody got the solution

  • shevi

    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

    • http://www.sharepointjohn.com John Chapman

      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.

  • Pravesh Singh

    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

  • http://4naren.blogspot.com Narendran

    THANKS A LOT, IT HELPS A MORE.

    Narendran
    Tweet me @MyNaren

  • bartek4c

    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

  • http://grievesy.com grievesy

    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

  • days

    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.