Gridview row color change based on data c#

Our Reader Score
[Total: 0 Average: 0]

Codebehind change Gridview row color:   This article explains how to change Gridview row color based on data in C#. For example in our Gridview we are displaying student report card information, .i.e student name and their academic percentage, now we want to highlight those record who got less than 35 % or greater than 75.

So based on data (condition) we change the background color of Gridview row in c# respectively. Here for merit we set green color, and for failed we set the red color.

You can also check Gridview related post .i.e.  Drag Drop to reorder GridView Rows,  Bind drop-down list inside Gridview edit template, and  Sorting Gridview control on header click with pagination.

# Html Markup:

First we are going to add Gridview control in our web page. So our HTML markup looks like as below.


# Code behind:

Here we bind data to our Gridview control. I have added a datatable with  some values ( data ) as  Student Name, Percentage.

Now set this datatable as our Gridview control datasource.

Now we are at the main part of this post:

Code how to set the different background color of Gridview row, based on data in C#. For this, we use GridView.RowDataBound Event this event Occurs when a data row is bound to data in a GridView control.

The RowDataBound event is raised when a data row (represented by a GridViewRow object) is bound to data in the GridView control.

This enables you to provide an event-handling method that performs a custom routine, such as modifying the values of the data bound to the row, whenever this event occurs.

 Gridview Row color change using GridView.RowDataBound Event


In the above code  first we  fetch, the value from the third column and convert it into an integer  datatype, later we apply our condition.

Here in my case I am checking it if it’s greater than 75, then set Gridview row background color as green, and if its less than 35, then set  row background color as red.

I have added a class to respected Gridview row, to make above code actually working we need to add those CSS class in our Webpage (.aspx ) design page as shown below.


Finally here’s our output: Change Gridview control row background-color based on data.

Gridview row color change based on data c#
Gridview row color change based on data c#


You must check these articles:

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Get your Printable Copy


  1. Hello Sir, U have provided easy and great solution its working . On data binding i used this
    GridView1.DataSource = dt1;
    I am using two data tables bound to grid view and want to color them differently both dt1 and dt2.

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    if (e.Row.RowType == DataControlRowType.DataRow)
    string setrowcolor = string.Empty;
    if (dt1.Rows.Count != 0)
    foreach (DataRow row in dt1.Rows)
    setrowcolor = “nearbyfit”;
    e.Row.CssClass = setrowcolor;
    if (dt.Rows.Count != 0)
    foreach (DataRow row in dt.Rows)
    setrowcolor = “perfectfit”;
    e.Row.CssClass = setrowcolor;

    but the reflects in only one color,How do i achieve it?

    • Hi Priti thanks for reading.

      Well you can achieve it by adding one extra column(dtfrom) to each DataTable .i.e for dt1 add value for newly added column (dtfrom) as 1 and for dt2 set value as 2.

      Then on GridView_RowDataBound event check the cell value and set your CSS Style by adding respective CSS class.

  2. Hi. I really liked this example. Actually my scenarios is similar to this. I am into sharepoint dev. my scenarion is to develop a gantt chart of tasks into gridview. Suppose a task is initiated on jan 1, 2015 and goes upto mar 1, 2015, it means 3 columns of grid view should be colored. I have taken 13 columns in grid view. 1st col for task and rest 12 col for jan to dec month. It will not show any date. It will be just displayed as Jan, feb upto dec. Suppose if task initiated in fall month, then color from jan to mar (imagine) should be yellow. If it happens in summer task from apr to aug, then it should be colored as gray. Hence it will be display as a gantt chart.
    Pls provide solution. I m using sharepoint list to fetch data from list to grid view. all category of fall, summer are stored in sp list.

    • Hi amit,
      Thanks for the comment, well I haven’t got chance to work with SharePoint so I can’t give you proper solution, but will give a basic idea.

      As you generate 12 columns dynamically .i.e (Jan,Feb, so on…) so you can create a list of collection which holds the MonthName and Column index position , Based on data (database value) you can color specific column using column index