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:
 

jQuery - Set Grid View Row Color On The base of any Column Value

Article:
Viewed:  720 
Posted On:  7/19/2015 10:06:18 AM 
How we can set Row Background color on the base of any column value in ASP.NET grid View using jQuery ? 

In this article I am going to show how we can set Grid View Row Background color on the base of any column value using jQuery in ASP.NET.

In my example I am showing Data from below table:

1.png

Image 1.

Script of my Employee Table:

CREATE TABLE [dbo].[Employee](
          [ID] [int] IDENTITY(1,1) NOT NULL,
          [Name] [varchar](50) NULL,
          [Email] [varchar](500) NULL,
          [Country] [varchar](50) NULL,
          [ProjectID] [int] NULL,
          [ManagerName] [varchar](50) NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
          [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON,
ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO

Data in My Employee Table:


2.png

Image 2.

I am making a join with Project Table while showing records from this table:

Below is my Project Table:

3.png

Image 3.

Scrip of my Project Table:

CREATE TABLE [dbo].[Project](
          [ProjectID] [int] IDENTITY(1,1) NOT NULL,
          [ProjectName] [varchar](50) NULL,
          [ProjectLeader] [varchar](50) NULL,
 CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED
(
          [ProjectID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
 IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON,
 ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO

Data in my Project Table:

 

4.png

Image 4.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="Contains_In_jQuery.Default3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery: Change Row Back Color</title>
    <script src="Scripts/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#gvData').empty();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default3.aspx/BindEmployees",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'>
                                                   <td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td>
                                                   <td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td>
                                                   <td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>"
);

                    for (var i = 0; i < result.d.length; i++) {
                        var Country = result.d[i].Country;
                        if (Country.indexOf('India') != -1) {
                            $("#gvData").append("<tr  style='background-color:#DC143C; font-family:Verdana; font-size:10pt;color:White;'>
                                                             <td style='text-align:left;'>"
+ result.d[i].ID + "</td>
                                                            <td style='text-align:left;'>"
+ result.d[i].Name + "</td>
                                                                     <td style='text-align:left;'>"
+ result.d[i].Email + "</td>
                                                                 <td style='text-align:left;'>"
+ result.d[i].Country + "</td>
                                                               <td style='text-align:left;'>"
+ result.d[i].ProjectID + "</td>
                                                               <td style='text-align:left;'>"
+ result.d[i].ManagerName + "</td></tr>");

                        }

                        else {

                            $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'>
                                                           <td style='text-align:left;'>"
+ result.d[i].ID + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Name + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Email + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Country + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].ProjectID + "</td>
                                                            <td style='text-align:left;'>"
+ result.d[i].ManagerName + "</td></tr>");

                        }

                    }

                },

                error: function (result) {
                    alert("Error");
                }
            });
 
            $(function () {
                $("[id*=gvData] td").hover(function () {
                    $("td", $(this).closest("tr")).addClass("hover_row");
                }, function () {
                    $("td", $(this).closest("tr")).removeClass("hover_row");
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table style="width: 100%; text-align: center; border: solid 5px red; background-color: orange; vertical-align: top;">
            <tr>
                <td>
                    <div>
                        <fieldset style="width: 99%;">
                            <legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Set Row Back Color By Checking Column Value</legend>
                            <table style="width: 100%;">
 
                                <tr>
                                    <td style="vertical-align: top; background-color: yellowgreen; text-align: center;">
                                        <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True"
                                            BackColor="White" GridLines="Both"
                                            BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">
                                            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                                            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                                            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                                            <RowStyle BackColor="White" ForeColor="#330099" />
                                            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                                            <SortedAscendingCellStyle BackColor="#FEFCEB" />
                                            <SortedAscendingHeaderStyle BackColor="#AF0101" />
                                            <SortedDescendingCellStyle BackColor="#F6F0C0" />
                                            <SortedDescendingHeaderStyle BackColor="#7E0000" />
                                        </asp:GridView>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now my aspx.cs code is:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace Contains_In_jQuery
{
    public partial class Default3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindGridWithDummyRow();
            }
        }
 
        public void BindGridWithDummyRow()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Name");
            dt.Columns.Add("Email");
            dt.Columns.Add("Country");
            dt.Columns.Add("ProjectID");
            dt.Columns.Add("ManagerName");
            gvData.DataSource = dt;
            gvData.DataBind();
        }
 
        [WebMethod]
        public static Employee[] BindEmployees()
        {
            string connectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
            DataTable dt = new DataTable();
            List<Employee> employeeList = new List<Employee>();
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                using (SqlCommand command = new SqlCommand("select e.ID, e.Name,e.Email,e.Country,ProjectName,
                                                                                        e.ManagerName from Employee as e
                                                                                        Inner join project as p on e.ProjectID=p.ProjectID ORDER BY e.Name"
, con))

                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(command);
                    da.Fill(dt);
                    foreach (DataRow dtrow in dt.Rows)
                    {
                        Employee employee = new Employee();
                        employee.ID = Convert.ToInt32(dtrow["ID"].ToString());
                        employee.Name = dtrow["Name"].ToString();
                        employee.Email = dtrow["Email"].ToString();
                        employee.Country = dtrow["Country"].ToString();
                        employee.ProjectID = dtrow["ProjectName"].ToString();
                        employee.ManagerName = dtrow["ManagerName"].ToString();
                        employeeList.Add(employee);
                    }
                }
            }
            return employeeList.ToArray();
        }
    }
}

Now Run your application:

Here while showing records I am setting those row back color where Country value is India:

5.png

Image 5.

If you want to set Column background color also:

For this I made change here

$(document).ready(function () {
            $('#gvData').empty();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default3.aspx/BindEmployees",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    $("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'>
                                                   <td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td>
                                                    <td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td>
                                                    <td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>"
);

                    for (var i = 0; i < result.d.length; i++) {
                        var Country = result.d[i].Country;
                        if (Country.indexOf('India') != -1) {
                            $("#gvData").append("<tr  style='background-color:#DC143C; font-family:Verdana;
                                                              font-size:10pt;color:White;'><td style='text-align:left;'>"
+ result.d[i].ID + "</td>
                                                            <td style='text-align:left;'>"
+ result.d[i].Name + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Email + "</td>
                                                           <td style='text-align:left; background-color:green;'>"
+ result.d[i].Country + "</td>
                                                          <td style='text-align:left;'>"
+ result.d[i].ProjectID + "</td>
                                                          <td style='text-align:left;'>"
+ result.d[i].ManagerName + "</td></tr>");

                        }
                        else {

                            $("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'>
                                                           <td style='text-align:left;'>"
+ result.d[i].ID + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Name + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Email + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].Country + "</td>
                                                           <td style='text-align:left;'>"
+ result.d[i].ProjectID + "</td>
                                                            <td style='text-align:left;'>"
+ result.d[i].ManagerName + "</td></tr>");

                        }
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
 

6.png

Image 6.

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