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.

Leave a Comment

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