Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Change GridView Row Back Color

Article:
Viewed:  1951 
Posted On:  23/04/2013 11:21:46 
How to change GridView row back color on a particular condition ? 

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...

2.png

Image 1.

My table data...

1.png

Image 2.

Output of my program is: You can see row color is different according to country condition.

3.png

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;
}

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us