In this article we will change the background color of rows of grid-view on which the mouse pointer is moved on.
Introduction
There are sometimes where we need to highlight data for user when he is interacting with the Web application.In this article we will be using A Grid view and highlight its rows when the user moves its pointer to different rows.
Pre-Requisite for Article
- We believe you know how to embed Jquery in the App if not please visit this link to know how to embed Jquery in the web application Link :- http://www.dotnetfunda.com/articles/article2247-let-us-learn-basics-of-jquery.aspx
- Basic knowledge of CSS.
Objective
- Highlight GridView Rows using JQuery on Mouse Over
Using the code
- Create a New Website in VS 2010 -> Add a Web Form.
- Create 2 New Folder by right clicking in the website name and name both the folder as Jquery and CSS respectively.
- Now follow the steps for adding Jquery File from the article link pasted above.
- Now Right Click on the Folder named CSS and Select Add New Item -> StyleSheet.css -> Name it as Main.css. The Solution Explorer should be like (screen 1)
Let us start Implementation
// CSS File for Color Change background of Gridview Rows on Mouse Over
body
{
font-family::Bookman Old Style;
font-size: 15pt;
}
td
{
cursor: pointer;
}
.rowHighlight
{
background-color:Lime;
}
Explanation of CSS
- The Body class is by default added and we have set the Font as Bookman Old Style and size to 15
- Now since we want to change the gridview color we will use the td element of table and set the cursor property to pointer.
- We then create a Class named Hover_row and change the color to Lime.
// JQuery function to change the Color of GridView rows
<script type="text/javascript">
$(document).ready(function () {
$('#xdata tr:has(td)').mouseover(function () {
$(this).addClass('rowHighlight');
});
$('#xdata tr').mouseout(function () {
$(this).removeClass('rowHighlight');
})
})
</script>Explanation of Jquery Function
- We first load the document.ready function and then we go ahead and declare a function and get the id of gridview using the # Tag and then find the td tag of table and append mouse over function and once we append to mouse over function we add the cssclass that we have wrote in CSS file.
- To bring back the Color to normal we find the TR element and assign the Mouse out function and use the remove class method to bring back the color to normal.
// Complete HTML Mark up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridDemo.aspx.cs" Inherits="GridDemo" %>
<!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></title>
<script src="Jquery/Jquery.js" type="text/javascript"></script>
<link href="CSS/Maincss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#xdata tr:has(td)').mouseover(function () {
$(this).addClass('rowHighlight');
});
$('#xdata tr').mouseout(function () {
$(this).removeClass('rowHighlight');
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="style1" style="text-align: center">
Highlight GridView Rows using JQuery on Mouse Over<br />
<br />
<div align="center">
<asp:GridView ID="xdata" runat="server">
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Output 1: No Highlight
Output 2 : Highlighting Rows on Mouse Over
Conclusion
You can change the Color of the Highlight in the CSS Code in rowHighlight class by changing the background color attribute