How To: Change the row Background color based on the database value using GridView Control

We have seen many examples on how to change the background color of row based on the data using DataGrid Control. This can be done using a helper function or using the appropriate event of the datagrid

We will use the similar scenerio to find out how to use GridView Control in such case.

Step 1: Drag Drop GridView Control

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"  ></asp:GridView>

Step 2: We will use SqlDataSource control for the connectivity with the Sql Database

Lets use web.config for Sql Connection string:

<connectionStrings>

connectionStrings>

<add name="DummyDB" connectionString="Server=localhost;Integrated Security=True;Database=DummyDB;Persist Security Info=True" providerName="System.Data.SqlClient" />

</connectionStrings >

</connectionStrings >

The connection string is used with the Sql Datasource control as follows in the respective page

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DummyDB %>" SelectCommand="Select * from products"></asp:SqlDataSource>

Step 3:  We have Products table with field Unitprice as one of the fields. We will change the row background color to red if the UnitPrice<10

Step 3:  We have Products table with field Unitprice as one of the fields. We will change the row background color to red if the UnitPrice<10

This is done using the RowDataBound event

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound" >

</asp:GridView>

Step 4: We will code as follows for the RowDataBound Event.

VB.NET

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

   If e.Row.RowType = DataControlRowType.DataRow Then

      If (e.Row.DataItem("UnitsInStock") < 20) Then

         e.Row.BackColor = Drawing.Color.Red

      End If

   End If

End Sub

Thats All!

 

Published Friday, January 27, 2006 4:38 PM by SushilaSB
Filed under:

Comments

Saturday, January 28, 2006 8:02 AM by Hannes Preishuber

# re: How To: Change the row Background color based on the database value using GridView Control

Saturday, January 28, 2006 9:32 AM by Sushila

# re: How To: Change the row Background color based on the database value using GridView Control

Thanks for the link Hannes
Thursday, July 05, 2007 4:30 PM by Andy

# re: How To: Change the row Background color based on the database value using GridView Control

Many thanks for that. Simple bit of code, but could i work it out .. ? No. Cheers Works a TREAT :-)

Saturday, October 20, 2007 1:52 PM by Gersy

# re: How To: Change the row Background color based on the database value using GridView Control

Hi there , I can't Convert this code to c# , help me please , waiting for reply

Monday, November 05, 2007 5:16 PM by Sabbiamobile

# re: How To: Change the row Background color based on the database value using GridView Control

c# code :

if ( ((int)DataBinder.Eval(e.Row.DataItem, "UnitsInStock")) > 20 ) ....

Thursday, January 03, 2008 9:57 AM by Panky

# re: How To: Change the row Background color based on the database value using GridView Control

Code is not working , it's is not finding the Control in the GridView

Tuesday, April 22, 2008 4:48 PM by eladiom

# re: How To: Change the row Background color based on the database value using GridView Control

What if you wanted to use a custom color, like "#FF3399".  The backcolor coding listed above will not allow me to do this.

Monday, May 05, 2008 9:53 PM by Craig

# re: How To: Change the row Background color based on the database value using GridView Control

If you want to use a custom color such as the HTML one you've specified you need to use the ColorTranslator functionality.

e.Row.BackColor = System.Drawing.ColorTranslator.FromHtml("#FF3399");

Wednesday, August 27, 2008 2:23 AM by balaji_expert

# re: How To: Change the row Background color based on the database value using GridView Control

Nice. I have got it.

Thursday, February 12, 2009 8:50 AM by Amber

# re: How To: Change the row Background color based on the database value using GridView Control

Thanx alot.It realy works fine and was a great help.

Thursday, March 26, 2009 10:25 AM by Férnas

# re: How To: Change the row Background color based on the database value using GridView Control

it is exactly what I was looking for..

Thanks a lot people...

Sabbiamobile, thanks for C# code..

google and blogs like this make life much easier.. ;)

Thursday, April 09, 2009 9:10 AM by Atif

# re: How To: Change the row Background color based on the database value using GridView Control

i hv a gridview ,in every row of gridview i have linkbuttons, i want to change the color of that particular row in which linkbutton is clicked

Friday, May 22, 2009 3:04 PM by Yaduraj Shakti

# re: How To: Change the row Background color based on the database value using GridView Control

Thanx for code but I want C# code

Thursday, June 04, 2009 4:33 AM by KK

# re: How To: Change the row Background color based on the database value using GridView Control

   Protected Sub gvEmployeeActivities_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvEmployeeActivities.RowDataBound

       If e.Row.RowType = DataControlRowType.DataRow Then

           Dim lblActivityStatus As Label = e.Row.FindControl("lblActivityStatus")

           If Not lblActivityStatus Is Nothing Then

               If lblActivityStatus.Text.Trim() = "Started" Then

                   e.Row.ForeColor = Drawing.Color.Green

               ElseIf lblActivityStatus.Text.Trim() = "Stopped" Then

                   e.Row.ForeColor = Drawing.Color.Red

               ElseIf lblActivityStatus.Text.Trim() = "Completed" Then

                   e.Row.ForeColor = Drawing.Color.Blue

               End If

               ' e.Row.ForeColor = Drawing.Color.Red

           End If

       End If

   End Sub

Wednesday, July 01, 2009 2:19 AM by Supriya

# re: How To: Change the row Background color based on the database value using GridView Control

i need to change the text color depending on the text value of a perticular collunm and not the back color of the grid view. any help...

Monday, July 27, 2009 4:45 AM by Addy

# re: How To: Change the row Background color based on the database value using GridView Control

i neeed to just change the color of just the first row that is coming in the grid and leave all the rest of the rows unchanged.

plssss help me it realy urgent

Wednesday, August 19, 2009 7:51 AM by Reshma

# re: How To: Change the row Background color based on the database value using GridView Control

i need c# code plz help me..

Monday, October 19, 2009 2:50 PM by amp0201

# re: How To: Change the row Background color based on the database value using GridView Control

protected void GridView1_OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)

   {

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

         if ((string)(DataBinder.Eval(e.Row.DataItem,"RFIDTag")) == "" ){

             e.Row.BackColor = System.Drawing.Color.LightBlue;          

      }      

    }

   }

Wednesday, February 17, 2010 4:10 AM by kiran

# re: How To: Change the row Background color based on the database value using GridView Control

like this its not working for which is applied with css

Monday, February 22, 2010 11:18 PM by Virag Desai

# re: How To: Change the row Background color based on the database value using GridView Control

Thanx !! works like a charm amp0201 !!!

Friday, May 28, 2010 6:21 AM by razvantim@hotmail.com

# re: How To: Change the row Background color based on the database value using GridView Control

thanks, worked perfectly

Tuesday, July 20, 2010 11:12 PM by indhu

# re: How To: Change the row Background color based on the database value using GridView Control

thanks a lot...... :)

Tuesday, August 17, 2010 4:52 AM by CHMARA

# re: How To: Change the row Background color based on the database value using GridView Control

It was useful for me...

Thursday, September 23, 2010 6:01 AM by Tanvi Sethi

# re: How To: Change the row Background color based on the database value using GridView Control

Thanks for the code. The code does not work in the following scenario though. A button on gridview opens an AjaxModalPopup. If I press cancel on the popup the colour goes away. any idea?

Thursday, September 23, 2010 11:59 AM by Tanvi Sethi

# re: How To: Change the row Background color based on the database value using GridView Control

The colour for rows does not work even when a button/ link is pressed.

Wednesday, November 17, 2010 6:18 AM by Arun

# re: How To: Change the row Background color based on the database value using GridView Control

re: How To: Change the row Background color in grid view when i insert the any value of form.

Example when i insert value of address textbox  newyork color is blue and now when i insert the delhi color is blue.

Means when i insert any value of address textbox color is blue.

Friday, February 25, 2011 11:01 PM by Nilesh Umaretiya

# re: How To: Change the row Background color based on the database value using GridView Control

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

           }

           //e.Row.Cells[0].BackColor = Color.FromName("gray");

           //e.Row.Cells[1].BackColor = Color.FromName("gray");

           //e.Row.Cells[2].BackColor = Color.FromName("gray");

           //e.Row.Cells[3].BackColor = Color.FromName("gray");

           //e.Row.Cells[4].BackColor = Color.FromName("gray");

           //e.Row.BorderWidth = 2;

           //e.Row.BorderColor = Color.FromName("#43C6DB");

       }

   }

Monday, May 16, 2011 4:39 AM by weblogs.asp.net

# re: How To: Change the row Background color based on the database value using GridView Control

How To_3A00_ Change the row Background color based on the database value using GridView Control.. WTF? :)

Tuesday, May 24, 2011 5:07 AM by praveen

# re: How To: Change the row Background color based on the database value using GridView Control

Can you do it in c# so that we can able to use it in project

Monday, August 22, 2011 9:35 PM by rtyecript

# re: How To: Change the row Background color based on the database value using GridView Control

I really liked the article, and the very cool blog

Wednesday, August 31, 2011 6:10 AM by rathi

# re: How To: Change the row Background color based on the database value using GridView Control

hi

   i already have a color and stored it in arraylist.

    i have to plot the color for N number of rows.

    GridView1.rows[i].backcolor=(color)ar[i];

here ar contains the color..

    but it is plotting for the last row only..

    ie,it is plotting for last row with the last color..

      what to do...

Monday, September 19, 2011 5:31 PM by Swetha

# re: How To: Change the row Background color based on the database value using GridView Control

Hi,

In order to change one single row color amongst numerous rows in a gridview, in asp.net, the following code can be used.

DataTable dt = new Datatable(); --> assign this table with some values from database.

for (int k = 0; k < dt.Rows.Count; k++)

{

 for (int i = 0; i < dt.Rows[k].Cells.Count;

        i++)

 {

     dt.Rows[k].Cells[i].ForeColor = Color.Red;

 }

}

Leave a Comment

(required) 
(required) 
(optional)
(required)