Click here to Skip to main content
11,648,960 members (86,104 online)
Click here to Skip to main content

Implementing Hover Delay on the GridView Rows

, 26 May 2009 CPOL 39.9K 513 35
Rate this:
Please Sign up or sign in to vote.
This article describes how to implement Hover Delay on the GridView rows for click event.


In this article, I'm going to present here an implementation of Hover Delay functionality on the GridViewrows for the click event.


In a recent project, my client wanted to implement Hover Delay to avoid unintentional clicks on the GridViewrows. Actually in this project, Items were displaying in the GridViewand there was a functionality to edit each item through a popup. Popup was opened by clicking on a GridViewrow. So the client required the user to hover over an item for 1 second before clicking became active to open a popup on a GridViewrow. When a user had hovered over an item for 1 second, the item got highlighted with some other color background to indicate that the user could now click to edit, i.e. before hovering over an item for 1 second, clicking should not be active. In other world if a user clicks on an item before sparing 1 second on a GridViewrow, popup should not be opened to edit a particular item. This is called Hover Delay. So I started digging into this problem and in conclusion came with the following solution.

CSS Code

I've used four CSS classes for this demo- Headerclass for GridView’s Headerrow and Rowand AlternateRowclasses for GridView’s Normaland Alternaterows respectively. HoverDelayclass is used to change the appearance of a GridViewrow (Normalor Alternate) on mouseover event.





I've put these CSS classes in a separate StyleSheet.css file and attached its reference in the Default.aspx page as:

<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />


Below is the HTML code of the GridView. I've applied Row, AlternateRow& HeaderCSS classes in the GridView’s RowStyle, AlternatingRowStyleand HeaderStylerespectively.

<asp:GridView ID="gvHoverDelay" runat="server" AutoGenerateColumns="False"
      <asp:BoundField DataField="RandomNo" HeaderText="Random Number">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      <asp:BoundField DataField="Date" HeaderText="Date">
         <HeaderStyle Width="75px" />
         <ItemStyle Width="75px" />
      <asp:BoundField DataField="Time" HeaderText="Time">
         <HeaderStyle Width="100px" />
         <ItemStyle Width="100px" />
  <RowStyle CssClass="Row" />
  <AlternatingRowStyle CssClass="AlternateRow" />
  <HeaderStyle CssClass="Header" />

Attaching Events

I've attached click, mouseoverand mouseout events respectively on each GridViewrow through RowDataBound eventas:

if (e.Row.RowType == DataControlRowType.DataRow
    && (e.Row.RowState == DataControlRowState.Normal || 
		e.Row.RowState == DataControlRowState.Alternate))
    string CssClass = (e.Row.RowState == DataControlRowState.Normal
                        ? ((GridView)sender).RowStyle.CssClass : 
    e.Row.Attributes["onmouseover"] = string.Format
                                         "javascript:OnHoverDelay(this, '{0}', 

    e.Row.Attributes["onmouseout"] = "javascript:OffHoverDelay(this);";
    e.Row.Attributes["onselectstart"] = "javascript:return false;";
    e.Row.Attributes["onclick"] = "javascript:Click(this);";

GridView Row’s Mouseover Event

This eventgets fired whenever we put the mouse pointer over any GridView’s rows (Normalor Alternate). In this event, first of all, the CSS class of the current row is stored in the row’s custom attribute Classand then the Readymethod is invoked. Call of the Readymethod is delayed by 1 second through the JavaScript setTimeoutmethod. Here I've used JavaScript closure to delay the call of the Readymethod with certain arguments.

function OnHoverDelay(This, CurrentCSS, HoverCSS)
   This.Class = CurrentCSS;
   TimeOut = setTimeout( function() { Ready(This, HoverCSS); }, 1000);                

GridView Row’s Mouseout Event

This eventgets fired whenever we take away the mouse pointer from any of the GridView’s rows (Normalor Alternate). In this event, first of all the delay in the call of Readymethod is cancelled through the JavaScript clearTimeoutmethod if any. After that, the CSS class is restored and the value of the custom attribute IsReadyis made falsefor the current GridViewrow:

function OffHoverDelay(This)
   This.className = This.Class; 
   This.IsReady = false; 

GridView Row’s Click Event

This eventgets fired whenever we click on any GridView’s rows (Normalor Alternate). In this event alertmessage is shown if the value of the custom attribute IsReadyfor the current row is found to be true. You can invoke your own method instead of calling the alert()message.

function Click(This)
      alert('Ready to click!!!'); 

Ready Method

This method is invoked from the OnHoverDelaymethod. This method is basically used to change the CSS class as well as to make the value of the custom attribute IsReadyequal to truefor the current GridViewrow to indicate that the current GridViewrow is now ready to click.

function Ready(This, HoverCSS)
   This.className = HoverCSS; 
   This.IsReady = true; 

I've put all the JavaScript methods (OnHoverDelay, OffHoverDelay, Click& Ready) in a separate JScript.js file and attached its reference in the Default.aspx page as:

<script type="text/javascript" src="JS/JScript.js"></script>

Winding Up

So this is the approach that I've adopted to solve the Hover Delay problem. Although originally I developed Hover Delay to deactivate the click eventfor 1 second on a GridViewrow, later I also used Hover Delay to deactivate Drag n Drop of GridViewrows. Kindly let me know if any one has some other better or different solution.

Supporting Browsers

I have successfully tested this code on the following browsers:



  • 26th May, 2009 -- Article updated
  • 12th May, 2009 -- Original version posted


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


You may also be interested in...

Comments and Discussions

GeneralHighlight a particular row in a gridview on MouseOver Pin
Binu198517-Jun-14 1:58
memberBinu198517-Jun-14 1:58 
GeneralRe: Highlight a particular row in a gridview on MouseOver Pin
Samir NIGAM18-Jun-14 0:48
memberSamir NIGAM18-Jun-14 0:48 
GeneralVery nice Pin
Arun Gurung4-Sep-09 0:37
memberArun Gurung4-Sep-09 0:37 
GeneralMy vote of 1 Pin
jameswhiteuk17-Jun-09 20:38
memberjameswhiteuk17-Jun-09 20:38 
GeneralRe: My vote of 1 Pin
Samir NIGAM2-Jul-09 2:00
mvpSamir NIGAM2-Jul-09 2:00 
GeneralGood for learner Pin
mlbhaskar25-May-09 19:46
membermlbhaskar25-May-09 19:46 
GeneralRe: Good for learner Pin
Samir NIGAM25-May-09 19:55
mvpSamir NIGAM25-May-09 19:55 
GeneralYou r the GEM Pin
Member 305748722-May-09 19:03
memberMember 305748722-May-09 19:03 
GeneralRe: You r the GEM Pin
Samir NIGAM22-May-09 19:06
mvpSamir NIGAM22-May-09 19:06 
Generalreally gud one Pin
san_geit13-May-09 19:26
membersan_geit13-May-09 19:26 
very gud article sir.......
GeneralRe: really gud one Pin
Samir NIGAM13-May-09 19:37
memberSamir NIGAM13-May-09 19:37 
GeneralNice but Pin
JeffCirceo13-May-09 4:59
memberJeffCirceo13-May-09 4:59 
GeneralRe: Nice but Pin
Samir NIGAM13-May-09 5:16
memberSamir NIGAM13-May-09 5:16 
GeneralGood Approach Pin
steve_197012-May-09 18:06
membersteve_197012-May-09 18:06 
GeneralRe: Good Approach Pin
Samir NIGAM12-May-09 18:08
memberSamir NIGAM12-May-09 18:08 
GeneralYou are genius !!! Pin
kanu@adatapost12-May-09 2:40
memberkanu@adatapost12-May-09 2:40 
GeneralRe: You are genius !!! Pin
Samir NIGAM12-May-09 3:22
memberSamir NIGAM12-May-09 3:22 
GeneralNice article sir. Pin
Sandeep Shekhar11-May-09 21:29
memberSandeep Shekhar11-May-09 21:29 
GeneralRe: Nice article sir. Pin
Samir NIGAM11-May-09 21:31
memberSamir NIGAM11-May-09 21:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150804.4 | Last Updated 26 May 2009
Article Copyright 2009 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid