How to change color in Grid View based on a condition?

In this article i am going to explain about how to change the row color of a particular row in grid view based on the particular condition to differentiate the rows. For explanation purpose i have created a table called Employee in my local database and inserted 10 sample records. And also i have created a procedure called GetEmployeeDetails which will return all the details of the employee tables. below is the sql script used. 

01	CREATE TABLE Employee

02

(

03	Id INT IDENTITY PRIMARY KEY,

04	EmployeeName VARCHAR(100),

05	Department VARCHAR(100),

06	Designation VARCHAR(100),

07	JoinedDate DATE,

08	Salary INT

09

)

10

GO

11

12	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

13	VALUES('Employee-1','Development','Trainee','2009-06-01','10000')

14

15	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

16	VALUES('Employee-2','Design','Web Developer','2014-06-01','20000')

17

18	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

19	VALUES('Employee-3','Testing','Junior Tester','2011-06-01','35000')

20

21	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

22	VALUES('Employee-4','Product','Senior Manager','2012-06-01','50000')

23

24	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

25	VALUES('Employee-5','Development','Tech Lead','2005-06-01','49000')

26

27	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

28	VALUES('Employee-6','Development','Pjoject Manager','2009-06-01','70000')

29

30	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

31	VALUES('Employee-7','Design','Web Developer','2014-06-01','20000')

32

33	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

34	VALUES('Employee-8','Testing','Junior Tester','2011-06-01','54000')

35

36	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

37	VALUES('Employee-9','Product','Senior Manager','2012-06-01','35000')

38

39	INSERT INTO Employee(EmployeeName,Department,Designation,JoinedDate,Salary)

40	VALUES('Employee-10','Development','Tech Lead','2005-06-01','55000')

41

GO

42

43	CREATE PROC GetEmployeeDetails

44

AS

45

BEGIN

46	SET NOCOUNT ON

47	SELECT * FROM Employee

48	SET NOCOUNT OFF

49

END

50

GO

Now create a new asp.net application and drog and drop the grid view control on your form. And set AutoGenerateColumns property to true(By default it is true. You no need to do it.) That is it. Below is the html markup of the code. 

1	<form id="form1" runat="server">

2

<div>

3

<h2>

4	Change Row Color Based On Condition</h2>

5	<asp:gridview autogeneratecolumns="true" id="grdResults" runat="server">

6	</asp:gridview>

7

</div>

8

</form>

Now before proceeding further to write the cs code add connection string in web.config file 

1	<connectionstrings>

2	<add connectionstring="Data Source=local; Initial Catalog=mydb; User ID=SA;password=mypassword;" name="mydsn">

3	</add></connectionstrings>

And now include the below namespaces in your code file. 
C#.Net: 

1	using System.Data;

2	using System.Data.SqlClient;

3	using System.Configuration;

VB.Net: 

1	Imports System.Data

2	Imports System.Data.SqlClient

3	Imports System.Configuration

And in page load write the code to fetch the data from your table and bind it to grid view. The code is given below. 
C#.Net: 

01	protected void Page_Load(object sender, EventArgs e)

02

{

03

try

04

{

05	//read connection string from web.config

06	string connectionString = ConfigurationManager.ConnectionStrings["mydsn"].ConnectionString;

07	using (SqlConnection conn = new SqlConnection(connectionString))

08

{

09	using (SqlCommand cmd = new SqlCommand())

10

{

11	//Setting connection and command text to command object

12	cmd.Connection = conn;

13	cmd.CommandText = "GetEmployeeDetails";

14	cmd.CommandType = CommandType.StoredProcedure;

15

16	//Filling dataset with data

17	DataSet customers = new DataSet();

18	SqlDataAdapter adapter = new SqlDataAdapter(cmd);

19	adapter.Fill(customers, "EmployeeDetails");

20

21	//Binding grid view

22	grdResults.DataSource = customers.Tables["EmployeeDetails"];

23	grdResults.DataBind();

24

}

25

}

26

}

27	catch (Exception ex)

28

{

29	// handle error

30

}

31

}

VB.Net:

01	Protected Sub Page_Load(sender As Object, e As EventArgs)

02

Try

03	'read connection string from web.config

04	Dim connectionString As String = ConfigurationManager.ConnectionStrings("mydsn").ConnectionString

05	Using conn As New SqlConnection(connectionString)

06	Using cmd As New SqlCommand()

07	'Setting connection and command text to command object

08	cmd.Connection = conn

09	cmd.CommandText = "GetEmployeeDetails"

10	cmd.CommandType = CommandType.StoredProcedure

11

12	'Filling dataset with data

13	Dim customers As New DataSet()

14	Dim adapter As New SqlDataAdapter(cmd)

15	adapter.Fill(customers, "EmployeeDetails")

16

17	'Binding grid view

18	grdResults.DataSource = customers.Tables("EmployeeDetails")

19	grdResults.DataBind()

20

End Using

21

End Using

22	' handle error

23	Catch ex As Exception

24

End Try

25

End Sub

Now if you run the code you will get the output as given below... 

But in my case i would like to differentiate the row based on the employee salary. For that one i added the OnRowDataBound="grdProduct_RowDataBound" event of the grid view. The event handler code is given below.
C#.Net: 

01	protected void grdProduct_RowDataBound(object sender, GridViewRowEventArgs e)

02

{

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

04

{

05	//Getting salary of each employee

06	int Salary=  int.Parse(e.Row.Cells[5].Text);

07	if (Salary > 50000)

08

{

09	//Setting row back colour

10	e.Row.BackColor = System.Drawing.Color.LightGreen;

11

}

12	else if (Salary < 20000)

13

{

14	e.Row.BackColor = System.Drawing.Color.Pink;

15

}

16

}

17

}

VB.Net: 

01	Protected Sub grdProduct_RowDataBound(sender As Object, e As GridViewRowEventArgs)

02	If e.Row.RowType = DataControlRowType.DataRow Then

03	'Getting salary of each employee

04	Dim Salary As Integer = Integer.Parse(e.Row.Cells(5).Text)

05	If Salary > 50000 Then

06	'Setting row back colour

07	e.Row.BackColor = System.Drawing.Color.LightGreen

08	ElseIf Salary < 20000 Then

09	e.Row.BackColor = System.Drawing.Color.Pink

10

End If

11

End If

12

End Sub

Now if you will get the below output.

 Now over to you:

"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work, you can appreciate by leaving your comments. Stay tuned and stay connected for more technical updates."