Change Gridview Row Color on Mouseover using css and Javascript

In this article, I will show you how to change the colour of ASP.NET GridView Control when the user mouse over the row. In this code snippet, I use only client-side techniques like CSS and JavaScript to achieve the goal. Check out the following code snippet its very easy to understand

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Alternate.aspx.cs" Inherits="Alternate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <head runat="server">
        <title>Untitled Page</title>

        <style type="text/css">
            .datatable tr:hover,
            .datatable tr.hilite {
                background-color: #dfe7f2;

                color: #000000;

        <form id="form1" runat="server">
                <asp:GridView ID="GridView1" runat="Server" CssClass="datatable"> </asp:GridView>

        <script type="text/javascript">
            var rows = document.getElementsByTagName("tr");

            for (var i = 0; i < rows.length; i++) {
                rows[i].onmouseover = function () {
                    this.className += " hilite";

                rows[i].onmouseout = function () {
                    this.className = this.className.replace("hilite", "");
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Alternate: System.Web.UI.Page


  protected void Page_Load(object sender, EventArgs e)


    if (!IsPostBack)


      GridView1.DataSource = GetCustomMadeDataTable();




  public DataTable GetCustomMadeDataTable()


    //Create a new DataTable object
    System.Data.DataTable objDataTable = new System.Data.DataTable();

    //Create three columns with string as their type
    objDataTable.Columns.Add("ISBN", typeof(string));

    objDataTable.Columns.Add("Title", typeof(string));

    objDataTable.Columns.Add("Publisher", typeof(string));

    objDataTable.Columns.Add("Year", typeof(string));

    DataColumn[] dcPk = new DataColumn[1];

    dcPk[0] = objDataTable.Columns["ISBN"];

    objDataTable.PrimaryKey = dcPk;

    objDataTable.Columns["ISBN"].AutoIncrement = true;

    objDataTable.Columns["ISBN"].AutoIncrementSeed = 1;

    //Adding some data in the rows of this DataTable
    DataRow dr;

    for (int i = 1; i <= 5; i++)


      dr = objDataTable.NewRow();

      dr[1] = "Title" + i.ToString();

      dr[2] = "Publisher" + i.ToString();

      dr[3] = "200" + i.ToString();



    Session["strTemp"] = objDataTable;

    return objDataTable;


Next Post Previous Post
No Comment
Add Comment
comment url