Change GridView row color based on condition

Question

I want to change a particular row color of a gridview based on some condition. I am using ASP.NET with C#.

Nilesh Umaretiya · Accepted Answer · 2019-09-13T06:41:21.143

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    e.Row.Attributes.Add("style", "cursor:help;");
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Alternate)
    { 
        if (e.Row.RowType == DataControlRowType.DataRow)
        {                
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='orange'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#E56E94'");
            e.Row.BackColor = Color.FromName("#E56E94");                
        }           
    }
    else
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='orange'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='gray'");
            e.Row.BackColor = Color.FromName("gray");                
        }           
    }
}

Instead of modifying `Row` attributes etc. it's much better to create to two css classes and chenge only `e.Row.CssClass `. Simpler code end better separation of logic and view. — Piotr Nawrot, Dec 14 '15 at 11:43

score 29 · Answer 2 · answered May 10 '12 at 09:49

29

protected void DrugGridView_RowDataBound(object sender, GridViewRowEventArgs e)

{
    // To check condition on integer value
    if (Convert.ToInt16(DataBinder.Eval(e.Row.DataItem, "Dosage")) == 50)
    {
      e.Row.BackColor = System.Drawing.Color.Cyan;
    }
}

answered May 10 '12 at 09:49

Mubashir Ahmed

1,191
9
4

Thanks for the `DataBinder.Eval(arg1, arg2)` suggestion. Before this I was using a `HiddenField` to get the condition – Jamshaid K. Jan 08 '19 at 12:05

score 10 · Answer 3 · edited Aug 14 '14 at 07:49

10

Create GridView1_RowDataBound event for your GridView.

//Check if it is not header or footer row
if (e.Row.RowType == DataControlRowType.DataRow)
{
    //Check your condition here
    If(Condition True)
    {
        e.Row.BackColor = Drawing.Color.Red // This will make row back color red
    }
}

edited Aug 14 '14 at 07:49

Altaf Patel

1,351
1
17
28

answered Feb 19 '11 at 04:06

ashish.chotalia

3,696
27
28

score 4 · Answer 4 · answered Mar 02 '17 at 18:28

This method modifies both the back color (to dark red) and the text (to white) if a specific string ("TextToMatch") occurs in one of the columns:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.Cells[8].Text.Equals("TextToMatch"))
    {
        e.Row.BackColor = System.Drawing.Color.DarkRed;
        e.Row.ForeColor = System.Drawing.Color.White;
    }
}

Or another way to write it:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.Cells[8].Text.Equals("TextToMatch"))
    {
        e.Row.Attributes.CssStyle.Value = "background-color: DarkRed; color: White";
    }
}

score 2 · Answer 5 · answered Sep 12 '17 at 00:50

Alternatively, you can cast the row DataItem to a class and then add condition based on the class properties. Here is a sample that I used to convert the row to a class/model named TimetableModel, then in if statement you have access to all class fields/properties:

protected void GridView_TimeTable_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    var tt = (TimetableModel)(e.Row.DataItem);
                     if (tt.Unpublsihed )
                       e.Row.BackColor = System.Drawing.Color.Red;
                     else
                       e.Row.BackColor = System.Drawing.Color.Green;
                }
            }
        }

score 1 · Answer 6 · answered Jul 11 '19 at 05:37

 protected void gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Label lbl_Code = (Label)e.Row.FindControl("lblCode");
            if (lbl_Code.Text == "1")
            {
                e.Row.BackColor = System.Drawing.ColorTranslator.FromHtml("#f2d9d9");
            }
        }
    }

score 0 · Answer 7 · answered Nov 11 '21 at 10:27

For the future programmer, if you didn't get the solution yet. The following code works for me to change the row color depending on condition (different types of the row that contain the string value):

public YourClassName()
{
   InitializeComponent();
   SetAlternateRowColor();
}

public void SetAlternateRowColor()
{
   for (int iCount = 0; iCount < reservationDataGridView.Rows.Count; iCount++)
   {
      if (Convert.ToString(reservationDataGridView.Rows[iCount].Cells[7].Value) == "CellValue")
         reservationDataGridView.Rows[iCount].DefaultCellStyle.BackColor = Color.Orange;
      else if (Convert.ToString(reservationDataGridView.Rows[iCount].Cells[7].Value) == "CellValue")
         reservationDataGridView.Rows[iCount].DefaultCellStyle.BackColor = Color.GreenYellow;
      else
         reservationDataGridView.Rows[iCount].DefaultCellStyle.BackColor = Color.Red;
   }
}

score -3 · Answer 8 · edited Jan 01 '13 at 20:29

\\loop throgh all rows of the grid view  

if (GridView1.Rows[i - 1].Cells[4].Text.ToString() == "value1")
{
   GridView1.Rows[i - 1].ForeColor = Color.Black;
}
else if (GridView1.Rows[i - 1].Cells[4].Text.ToString() == "value2")
{
   GridView1.Rows[i - 1].ForeColor = Color.Blue;
}
else if (GridView1.Rows[i - 1].Cells[4].Text.ToString() == "value3")
{
   GridView1.Rows[i - 1].ForeColor = Color.Red;
}
else if (GridView1.Rows[i - 1].Cells[4].Text.ToString() == "value4")
{
   GridView1.Rows[i - 1].ForeColor = Color.Green;
}

Change GridView row color based on condition

8 Answers8

Linked