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.

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

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

    Reply
  2. 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
  3. Thanks! I will try it out.

    Reply
  4. 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
    • we have the same problem.. anybody got the solution

      Reply
    • 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
  5. THANKS A LOT, IT HELPS A MORE.

    Narendran

    Tweet me @MyNaren

    Reply
  6. 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
  7. 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
  8. 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

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Pin It on Pinterest

Share This