How to highlight a GridView's row on hover

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);
  }
}

Date Posted: 06 May 2007 20:50
Last Updated:
Posted by: Mikesdotnetting
Total Views to date: 13224

Comments

16 August 2009 05:17 from Scott

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

17 August 2009 07:30 from Mikesdotnetting

@Scott

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

Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

Not relevant to the article
Gratuitous links to your own site or product
Anything abusive or libellous
Spam
Anything in a language I don't understand (English is best)

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Your name:

Your email address:

Your comments:

9 + 1

Mikesdotnetting

Tags

My Book

Blogs

How to highlight a GridView's row on hover

Comments