Post
Ask Question

JQuery: Set GridView Row Color on the Base of Any Column Value

In the example I am showing data from the following table:

Data from table
                                       Figure 1

The following is the script of my Employee table:

  1. CREATE TABLE [dbo].[Employee](  
  2.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [Email] [varchar](500) NULL,  
  5.     [Country] [varchar](50) NULL,  
  6.     [ProjectID] [int] NULL,  
  7.     [ManagerName] [varchar](50) NULL,  
  8.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  9. (  
  10.     [ID] ASC  
  11. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,   
  12. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON,   
  13. ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  14. ) ON [PRIMARY]  
  15.   
  16. GO  
The following is the data in my Employee table:

Data from table
                                    Figure 2.

I am making a join with the Project table when showing records from this table.

The following is the Project table:

Project Table
                                          Figure 3

The following is the script of my Project table:
  1. CREATE TABLE [dbo].[Project](  
  2.     [ProjectID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [ProjectName] [varchar](50) NULL,  
  4.     [ProjectLeader] [varchar](50) NULL,  
  5.  CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED   
  6. (  
  7.     [ProjectID] ASC  
  8. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,  
  9.  IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON,   
  10.  ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  11. ) ON [PRIMARY]  
  12.   
  13. GO  
The following is the data in my Project table:

Data in my Project Table
                                             Figure 4

The following is the aspx code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="Contains_In_jQuery.Default3" %>  
  2.   
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.   
  7.     <title>jQuery: Change Row Back Color</title>  
  8.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  9.       
  10.     <style type="text/css">  
  11.         body {  
  12.             font-family: Arial;  
  13.             font-size: 10pt;  
  14.         }  
  15.   
  16.         td {  
  17.             cursor: pointer;  
  18.         }  
  19.   
  20.         .hover_row {  
  21.             background-color: #A1DCF2;  
  22.         }  
  23.     </style>  
  24.     <script type="text/javascript">  
  25.         $(document).ready(function () {  
  26.             $('#gvData').empty();  
  27.             $.ajax({  
  28.                 type: "POST",  
  29.                 contentType: "application/json; charset=utf-8",  
  30.                 url: "Default3.aspx/BindEmployees",  
  31.                 data: "{}",  
  32.                 dataType: "json",  
  33.                 success: function (result) {  
  34.                     $("#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>");  
  35.                     for (var i = 0; i < result.d.length; i++) {  
  36.                         var Country = result.d[i].Country;  
  37.                         if (Country.indexOf('India') != -1) {  
  38.                             $("#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>");  
  39.                         }  
  40.                         else {  
  41.                             $("#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>");  
  42.                         }  
  43.                     }  
  44.                 },  
  45.                 error: function (result) {  
  46.                     alert("Error");  
  47.                 }  
  48.             });  
  49.   
  50.             $(function () {  
  51.                 $("[id*=gvData] td").hover(function () {  
  52.                     $("td", $(this).closest("tr")).addClass("hover_row");  
  53.                 }, function () {  
  54.                     $("td", $(this).closest("tr")).removeClass("hover_row");  
  55.                 });  
  56.             });  
  57.         });  
  58.     </script>  
  59. </head>  
  60. <body>  
  61.     <form id="form1" runat="server">  
  62.         <table style="width: 100%; text-align: center; border: solid 5px red; background-color: orange; vertical-align: top;">  
  63.             <tr>  
  64.                 <td>  
  65.                     <div>  
  66.                         <fieldset style="width: 99%;">  
  67.                             <legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Set Row Back Color By Checking Column Value</legend>  
  68.                             <table style="width: 100%;">  
  69.   
  70.                                 <tr>  
  71.                                     <td style="vertical-align: top; background-color: yellowgreen; text-align: center;">  
  72.                                         <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True"  
  73.                                             BackColor="White" GridLines="Both"  
  74.                                             BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">  
  75.                                             <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />  
  76.                                             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />  
  77.                                             <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />  
  78.                                             <RowStyle BackColor="White" ForeColor="#330099" />  
  79.                                             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />  
  80.                                             <SortedAscendingCellStyle BackColor="#FEFCEB" />  
  81.                                             <SortedAscendingHeaderStyle BackColor="#AF0101" />  
  82.                                             <SortedDescendingCellStyle BackColor="#F6F0C0" />  
  83.                                             <SortedDescendingHeaderStyle BackColor="#7E0000" />  
  84.                                         </asp:GridView>  
  85.                                     </td>  
  86.                                 </tr>  
  87.                             </table>  
  88.                         </fieldset>  
  89.                     </div>  
  90.                 </td>  
  91.             </tr>  
  92.         </table>  
  93.     </form>  
  94. </body>  
  95. </html>  
Now my aspx.cs code is:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Services;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10.   
  11. namespace Contains_In_jQuery  
  12. {  
  13.     public partial class Default3 : System.Web.UI.Page  
  14.     {  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.             if (!Page.IsPostBack)  
  18.             {  
  19.                 BindGridWithDummyRow();  
  20.             }  
  21.         }  
  22.   
  23.         public void BindGridWithDummyRow()  
  24.         {  
  25.             DataTable dt = new DataTable();  
  26.             dt.Columns.Add("ID");  
  27.             dt.Columns.Add("Name");  
  28.             dt.Columns.Add("Email");  
  29.             dt.Columns.Add("Country");  
  30.             dt.Columns.Add("ProjectID");  
  31.             dt.Columns.Add("ManagerName");  
  32.             gvData.DataSource = dt;  
  33.             gvData.DataBind();  
  34.         }  
  35.    
  36.         [WebMethod]  
  37.         public static Employee[] BindEmployees()  
  38.         {  
  39.             string connectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";  
  40.             DataTable dt = new DataTable();  
  41.             List<Employee> employeeList = new List<Employee>();  
  42.             using (SqlConnection con = new SqlConnection(connectionString))  
  43.             {  
  44.                 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))  
  45.                 {  
  46.                     con.Open();  
  47.                     SqlDataAdapter da = new SqlDataAdapter(command);  
  48.                     da.Fill(dt);  
  49.                     foreach (DataRow dtrow in dt.Rows)  
  50.                     {  
  51.                         Employee employee = new Employee();  
  52.                         employee.ID = Convert.ToInt32(dtrow["ID"].ToString());  
  53.                         employee.Name = dtrow["Name"].ToString();  
  54.                         employee.Email = dtrow["Email"].ToString();  
  55.                         employee.Country = dtrow["Country"].ToString();  
  56.                         employee.ProjectID = dtrow["ProjectName"].ToString();  
  57.                         employee.ManagerName = dtrow["ManagerName"].ToString();  
  58.                         employeeList.Add(employee);  
  59.                     }  
  60.                 }  
  61.             }  
  62.             return employeeList.ToArray();  
  63.         }  
  64.     }  
  65. }  
Here when showing records I am setting the row background color where the Country value is India:

row back color
                                                                        Figure 5

If you want to set Column background color then use the following changes:
  1. $(document).ready(function() {  
  2.     $('#gvData').empty();  
  3.     $.ajax({  
  4.         type: "POST",  
  5.         contentType: "application/json; charset=utf-8",  
  6.         url: "Default3.aspx/BindEmployees",  
  7.         data: "{}",  
  8.         dataType: "json",  
  9.         success: function(result) {  
  10.             $("#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>");  
  11.             for (var i = 0; i < result.d.length; i++) {  
  12.                 var Country = result.d[i].Country;  
  13.                 if (Country.indexOf('India') != -1) {  
  14.                     $("#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>");  
  15.                 } else {  
  16.                     $("#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>");  
  17.                 }  
  18.             }  
  19.         },  
  20.         error: function(result) {  
  21.             alert("Error");  
  22.         }  
  23.     });  
set Column background color
                                                                           Figure 6 


Similar Articles