Creating/Implementing/Developing DataGridView Row Hover Effect Using Asp.Net C# JavaScript

Posted by on November 12, 2010 Leave a comment (0) Go to comments

Introduction:
In this article,i am going to explain about how to develop a gridview row hover effect using javascript and asp.net.

Main:
For creating gridview row hover effect just we need to attach a javascript event in gridview row mouseover,

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 : 
			((GridView)sender).AlternatingRowStyle.CssClass);
 
    e.Row.Attributes["onmouseover"] = string.Format
                                      {
                                         "javascript:ShowHoverStyle(this, '{0}', 
							'HoverDelay');",
                                          CssClass
                                      );
 
    e.Row.Attributes["onmouseout"] = "javascript:DisableHoverStyle(this);";
    e.Row.Attributes["onselectstart"] = "javascript:return false;";
    e.Row.Attributes["onclick"] = "javascript:Click(this);";
 }
 
 
JavaScript Code:
 
For Hover ON:
 
function DisableHoverStyle(This)
{
   clearTimeout(TimeOut);
   This.className = This.Class; 
   This.IsReady = true; 
}
 
For Hover OFF:
 
function DisableHoverStyle(This)
{
   clearTimeout(TimeOut);
   This.className = This.Class; 
   This.IsReady = false; 
}
 
function Ready(This, HoverCSS)
{ 
   This.className = HoverCSS; 
   This.IsReady = true; 
} 
 
 
Css Code:
 
.Header
{
    background-color:DarkBlue;
    color:White;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
}
 
.Row
{
    background-color:Skyblue;
    color:Black;
    text-align:center;
    vertical-align:middle;
    cursor:default;
}
 
.AlternateRow
{
    background-color:#FFCC66;
    color:Black;
    text-align:center;
    vertical-align:middle;
    cursor:default;
}
 
 
.HoverDelay
{
    background-color:White;
    color:Black;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    cursor:hand;
}