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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.datatable tr:hover,
.datatable tr.hilite {
background-color: #dfe7f2;
color: #000000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="Server" CssClass="datatable"> </asp:GridView>
</div>
</form>
<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", "");
};
}
</script>
</body>
</html>
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();
GridView1.DataBind();
}
}
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();
objDataTable.Rows.Add(dr);
}
Session["strTemp"] = objDataTable;
return objDataTable;
}
}