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

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

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

Thomas 05/03/2018 00:59
In response to I'm Not Writing A Book On Razor Pages
There's a typo on this page: = true)] should be [BindProperty(SupportsGet = true)]...

Rolf Herbert 04/03/2018 19:25
In response to I'm Not Writing A Book On Razor Pages
So is MS deprecating razor Web Pages..? Is it dead..? I wish they would stop killing things so its...

Borut 17/02/2018 12:59
In response to I'm Not Writing A Book On Razor Pages
Mike, is it possible that Web Pages and Razor Pages "live" together in one web application? I a I...

hrboyce 09/02/2018 04:44
In response to I'm Not Writing A Book On Razor Pages
Mike, First thanks for doing this but I have to ask, any chance you would consider converting one of...

aziz sallam 07/02/2018 10:18
In response to I'm Not Writing A Book On Razor Pages
u are a great man...

Satyabrata Mohapatra 31/01/2018 11:36
In response to I'm Not Writing A Book On Razor Pages
This is a great news!!!! Thanks...

tangdf 30/01/2018 07:25
In response to I'm Not Writing A Book On Razor Pages
=> { o.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()); }); The extension method does...

Obinna Okafor 30/01/2018 04:02
In response to I'm Not Writing A Book On Razor Pages
Thank you very much. I would like to see a project built from scratch using Razor Pages. And it show...

rachida Dukes 31/10/2017 13:52
In response to Customising Identity in Razor Pages
Thanks again for this wonderful tutorial. I followed all the steps in this section called: Adding...

Rachida 31/10/2017 12:06
In response to Customising Identity in Razor Pages
Thanks very much for this wonderful tutorial, it helped a lot....