GridView: Highlight Row or Cell

Francis
9y
23.1k
0
2

Article

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.