How to highlight a GridView's row on hover

4.5 (6 votes)

As the user hovers over each row, it becomes highlighted, with the help of a small amount of javascript.

The javascript:

    
function highlight(tableRow, active)
{
if (active)
{
tableRow.style.backgroundColor = '#cfc';
}
else
{
tableRow.style.backgroundColor = '#fff';
}
}

function link(Url)
{
document.location.href = Url;
}

The Databound event of the GridView:

protected void GridView1_DataBound(object sender, EventArgs e)
{
  foreach (GridViewRow grow in GridView1.Rows)
  {
    grow.Attributes["onmouseover"] = "highlight(this, true);";
    grow.Attributes["onmouseout"] = "highlight(this, false);";
    HttpResponse myHttpResponse = Response;
    HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
    grow.Attributes.AddAttributes(myHtmlTextWriter);
  }
}

You might also like...

Date Posted:
Last Updated:
Posted by:
Total Views to date: 18241

2 Comments

- Scott

What is the advantage of this method over just using grow.Attributes.Add("onmouseover","highlight(this,true);"); ?

- Mike

@Scott

In some browsers, unless you reset the colour using the onmouseout event, it doesn't change back.

Recent Comments

ojorma 17/06/2017 09:24
In response to Razor Pages - The Elevator Pitch
Finally I can say goodbye to webforms...

Mau 06/06/2017 08:58
In response to Razor Pages - The Elevator Pitch
I am missing the razor view code. Thank you for your article. Design pattern should improve the of...

Obinna Okafor 26/05/2017 16:16
In response to Razor Pages - The Elevator Pitch
Thank you for this wonderful piece, Mike. I need more of these...Keep them coming - anything more...

Cyrus 26/05/2017 06:00
In response to Razor Pages - The Elevator Pitch
There are some concern about razor pages performance. Is it faster or slower than MVC? would you a a...

Cyrus 26/05/2017 05:44
In response to Razor Pages - Understanding Handler Methods
well done, thank you....

Satyabrata Mohapatra 23/05/2017 11:41
In response to Razor Pages - Understanding Handler Methods
Nice and easy !! Great post....

Cyrus 16/05/2017 19:55
In response to Razor Pages - Getting Started With The Preview
There is something wrong related to microsoft.dotnetcore.mvc.taghelpers! if you remove it from page...

Cyrus 16/05/2017 10:18
In response to Razor Pages - Getting Started With The Preview
well done mike, it was very useful, I really appreciate that....

Satyabrata Mohapatra 16/05/2017 07:21
In response to Razor Pages - Getting Started With The Preview
Finally!!!! web pages in asp.net core!!! Super excited !!!! Thank u sir for sharing.....Awaiting on...

Daniele 14/03/2017 10:24
In response to Working With Zip Files In ASP.NET MVC
is it possible give to the user a progress bar of the zipping process? Thanks in advance. ...