GridView: Highlight Row or Cell

Every ASP.Net developer experiences the most prominent GridView. This article shows all the many types of "highlighting" of rows/columns of a GridView using jQuery.

Problem

You may need to do any one of the following.

1. Highlight the row when the mouse is over it in a GridView.

2. Highlight the cell when the mouse is over it.

3. Highlight a row of the GridView when a row is clicked.

4. Highlight a cell on a GridView when clicked.

Prerequisite

This tutorial relies on jQuery purely. So you need to include the jQuery library in your solution. You can download jQuery from here.

Code

As a first step, we need some data to be filled into the GridView. For this purpose, I have created a simple table "tblEmployee" with some columns.

CREATE TABLE [dbo].[tblEmployee](
[EmpID] [int] NOT NULL,
[EmpName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[EmpAge] [int] NOT NULL,
CONSTRAINT [PK_tblEmp] PRIMARY KEY CLUSTERED
(
[EmpID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

Use the following script to insert values into that table:

insert into tblEmployee values (1,'Francis',30);
insert into tblEmployee values (2,'Ram',25);
insert into tblEmployee values (3,'Arul',25);
insert into tblEmployee values (4,'Prabhu',30);

As a next step, create a webform and include a GridView into it as in the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridviewDemo.aspx.cs" Inherits="DemoWebApp.GridviewDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmployee" runat="server" EmptyDataText="No Records Found" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField HeaderText="SNo" DataField="EmpID" />
<asp:BoundField HeaderText="Employee Name" DataField="EmpName" />
<asp:BoundField HeaderText="Age" DataField="EmpAge" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

The following code in the code-behind file checks the post-back and calls the method to bind the datatable to the GridView.

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Bind the grid
gvEmployee.DataSource = GetDataFromDB();
gvEmployee.DataBind();
}
}

The following function is used to get data from the database and return a datatable.

private DataTable GetDataFromDB()
{
DataTable dt = new DataTable();
// Read Connection String from WebConfig
string strConString = ConfigurationManager.ConnectionStrings["MyConString"].ToString();
// Create connection object
using (SqlConnection con = new SqlConnection(strConString))
{
string strQuery = "Select * from tblEmployee";
// open connection
con.Open();
// create command object
SqlCommand cmd = new SqlCommand(strQuery, con);
// create adapter
SqlDataAdapter da = new SqlDataAdapter(cmd);
// execute query and fill the data into datatable
da.Fill(dt);
}
return dt;
}

We will define the following "style" classes in the aspx file itself. These classes will be used in jQuery to highlight the row/cell.

<style type="text/css">
.selectedCell {
background-color: lightblue;
}
.unselectedCell {
background-color: white;
}
</style>

In the next step I'm going to add the jQuery to the aspx file (between the <script> and </script> tags). The following jQuery snippet is used to highlight the row when the mouse is over it.

// Highlight the row when mouse over on it
$(document).ready(function () {
$('#gvEmployee tr').hover(function () {
$(this).addClass('selectedCell');
}, function () { $(this).removeClass('selectedCell'); });
});

Include the following jQuery code if you want to highlight the cell instead of row:

// Highlight the cell when mouse over on it
$(document).ready(function () {
$('#gvEmployee td').hover(function () {
$(this).addClass('selectedCell');
}, function () { $(this).removeClass('selectedCell'); });
});

The following jQuery is used to highlight the row when the specific row is clicked.

//Highlight the cell when the row clicked
$(function () {
$(document).on('click', '#gvEmployee tr', function () {
$("#gvEmployee tr").removeClass('selectCell');
$(this).addClass('selectCell');
});
});

Include the following jQuery code if you want to highlight the cell when the specific cell is clicked.

//Highlight the cell when the row clicked
$(function () {
$(document).on('click', '#gvEmployee tr', function () {
$("#gvEmployee tr").removeClass('selectCell');
$(this).addClass('selectCell');
});
});

Highlight row/cell based on some condition:

In some cases you may want to highlight the row or cells based on some condition too. In that case, you can use the "RowDataBound" event of GridView. As an example I will highlight the row based on the "age" column value.

protected void gvEmployee_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int age = Convert.ToInt32(e.Row.Cells[2].Text.ToString());
if (age >= 25 && age < 30)
{
e.Row.BackColor = Color.GreenYellow;
}
if (age == 30)
{
e.Row.BackColor = Color.LightBlue;
}
}
}

The output will look as in the following:

In another way, you may want to highlight the column alone when binding the data, the following code does that.

protected void gvEmployee_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int age = Convert.ToInt32(e.Row.Cells[2].Text.ToString());
if (age >= 25 && age < 30)
{
e.Row.Cells[2].BackColor = Color.GreenYellow;
}
if (age == 30)
{
e.Row.Cells[2].BackColor = Color.LightBlue;
}
}
}

The above code output will be as in the following:

11 Comments

Join the conversation! Your thoughts help the community grow.

Tom Ernst6y ago
Any way to have the row color change not apply to the header row?
- Tom Ernst6y ago
  Here's a solution: $(document).ready(function () { $('#gvEmployee tr').hover(function () { $(this).addClass('selectedCell'); }, function () { $(this).removeClass('selectedCell'); }, $('#gvEmployee th').hover(function () { $(this).addClass('headerCell'); } )); });
Sibeesh Venu11y ago
Francis You are welcome buddy.
Rahul Kumar Saxena11y ago
Good work...
- Francis Susaimichael11y ago
  Thanks a lot Rahul!
Khargesh Rajput11y ago
Nice sir
- Francis Susaimichael11y ago
  Thanks for your comment! :)
Sibeesh Venu11y ago
Good One.
- Francis Susaimichael11y ago
  Thank you buddy! :)
Manish Kumar Choudhary11y ago
Good one.
- Francis Susaimichael11y ago
  Thanks Manish! :)