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.
ProblemYou 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)
- {
-
- 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();
-
- string strConString = ConfigurationManager.ConnectionStrings["MyConString"].ToString();
-
- using (SqlConnection con = new SqlConnection(strConString))
- {
- string strQuery = "Select * from tblEmployee";
-
- con.Open();
-
- SqlCommand cmd = new SqlCommand(strQuery, con);
-
- SqlDataAdapter da = new SqlDataAdapter(cmd);
-
- 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.
-
- $(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:
-
- $(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.
-
- $(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.
-
- $(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:![]()