In this article I am going to show how we can make a
mouse hover color change in a GridView with the help of jQuery...
My Output is:
Image 1.
Now mouse hover on any row...
Image 2.
aspx
is:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!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 id="Head1"
runat="server">
<title>GridView Row Color change on MouseHover...</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#GridEmployee tr:has(td)').mouseover(function() {
$(this).addClass('OnMouseHoverCSS');
});
$('#GridEmployee tr').mouseout(function() {
$(this).removeClass('OnMouseHoverCSS');
})
})
</script>
<style type="text/css">
.OnMouseHoverCSS
{
background-color: #48CCCD;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="20"
cellspacing="20"
width="50%"
align="center"
border="2">
<tr>
<td align="center">
<asp:GridView runat="server"
ID="GridEmployee"
AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF"
HeaderStyle-ForeColor="White" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="EmployeeNo"
HeaderText="EmployeeNo"
/>
<asp:BoundField DataField="Name"
HeaderText="Name"
/>
<asp:BoundField DataField="EmployeeCode"
HeaderText="EmployeeCode"
/>
<asp:BoundField DataField="Keywords"
HeaderText="Keywords"
/>
<asp:BoundField DataField="Mobile"
HeaderText="Mobile"
/>
<asp:BoundField DataField="Country"
HeaderText="Country"
/>
</Columns>
<FooterStyle
BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle
BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<HeaderStyle
BackColor="#5D7B9D"
ForeColor="White"
Font-Bold="True"></HeaderStyle>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
aspx.cs
is:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;
public partial class _Default :
System.Web.UI.Page
{
SqlDataAdapter da;
DataSet ds = new DataSet();
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void
BindData()
{
SqlConnection con = new
SqlConnection(@"Server=.;Database=Test;Integrated
Security=true;");
SqlCommand cmd = new
SqlCommand("SELECT * FROM Employee", con);
try
{
da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
if (!object.Equals(ds.Tables[0],
null))
{
if (ds.Tables[0].Rows.Count > 0)
{
GridEmployee.DataSource = ds.Tables[0];
GridEmployee.DataBind();
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
catch (Exception
ex)
{
}
}
}