Not too long ago, I asked you (Imar) in a posting here in this forum how to created a highlighted row on a Gridview on the mouseover event. You told me to go figure it out yourself. Well, guess what? .............
I did. Here is the code:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="_Default" StylesheetTheme="Standard" %>
<!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>Chapter 3 - Recipe 1: Highlighting rows / cells of GridView on hover</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//Use below for highlighting rows on hover
$("#<%=GridView1.ClientID%> tr").hover(
function() {
$(this).addClass("highlight");
},
function() {
$(this).removeClass("highlight");
});
//Use below for highlighting cells on hover
/*$("#<%=GridView1.ClientID%> td").hover(
function() {
$(this).addClass("highlight");
},
function() {
$(this).removeClass("highlight");
}
); */
});
</script>
<style media="screen" type="text/css">
.header
{
background-color:Gray;
font-weight:bold;
color:White;
text-align:center;
}
.highlight
{
background-color:#9999FF;
}
td { cursor:pointer;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:230px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">BOOK CATALOG</td></tr>
<tr>
<td colspan="2">
<asp:GridView ID="GridView1" SkinID="Professional" runat="server">
</asp:GridView>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
I don't you might want to consider using it for your new book or something or if anybody else is curious on learning how to do this Jquery trick, well here it is. Thanks again :-)
A new Jquery trick and a treat for Imar and everyone else.
button below this post to show your appreciation!
