Highlight GridView Rows using JQuery on Mouse Over

Raj.Trivedi
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 8064 red flag

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

  1. 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
  2. Basic knowledge of CSS.

Objective


  1. Highlight GridView Rows using JQuery on Mouse Over

Using the code


  1. Create a New Website in VS 2010 -> Add a Web Form.
  2. Create 2 New Folder by right clicking in the website name and name both the folder as Jquery and CSS respectively.
  3. Now follow the steps for adding Jquery File from the article link pasted above.
  4. 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

  1. The Body class is by default added and we have set the Font as Bookman Old Style and size to 15
  2. Now since we want to change the gridview color we will use the td element of table and set the cursor property to pointer.
  3. 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

  1. 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.
  2. 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


Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)