In this article I am going to show how we can set the
GridView row color on a particular condition.
In this article I am showing
employee data and I am changing the GridView row color according to their
country mean if country is India then there is different color and if country
is USA then different color.
below is my table structure...
Image 1.
My table data...
Image 2.
Output of my program is: You can see row color is
different according to country condition.
Image 3.
aspx code of my application is:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Gridview Row Color</title>
<link rel="stylesheet"
type="text/css"
href="StyleSheet.css"
/>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="20"
cellspacing="20"
width="50%"
align="center"
border="2">
<tr>
<td align="center">
<asp:GridView ID="GridEmployee"
runat="server"
OnRowDataBound="gvdata_RowDataBound"
CellPadding="8"
CellSpacing="1"
ForeColor="#333333"
GridLines="None">
<FooterStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<SelectedRowStyle
BackColor="#E2DED6"
Font-Bold="True"
ForeColor="#333333"
/>
<HeaderStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<EditRowStyle BackColor="#999999"
/>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>
</html>
Below is my aspx.cs code:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class _Default :
System.Web.UI.Page
{
SqlDataAdapter da;
DataSet ds = new DataSet();
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void
BindData()
{
SqlConnection con = new
SqlConnection(@"Server=.;Database=Test;Integrated
Security=true;");
SqlCommand cmd = new
SqlCommand("SELECT * FROM Employee", con);
try
{
da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
if (!object.Equals(ds.Tables[0],
null))
{
if (ds.Tables[0].Rows.Count > 0)
{
GridEmployee.DataSource = ds.Tables[0];
GridEmployee.DataBind();
Session["MyTable"] =
ds.Tables[0];
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
catch (Exception
ex)
{
}
}
protected void
gvdata_RowDataBound(object sender, GridViewRowEventArgs e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.Cells[5].Text == "India")
{
e.Row.CssClass = "gridIndiaCSS";
}
else if
(e.Row.Cells[5].Text == "Japan")
{
e.Row.CssClass = "gridJapanCSS";
}
else if
(e.Row.Cells[5].Text == "USA")
{
e.Row.CssClass = "gridUSACSS";
}
}
}
}
CSS file is:
body
{
font-family: Calibri;
}
.gridIndiaCSS
{
background: #2E8B57;
font-weight: bold;
color: White;
}
.gridJapanCSS
{
background: #87CEFA;
font-weight: bold;
color: White;
}
.gridUSACSS
{
background: #700000;
font-weight: bold;
color: White;
}