Highlight Rows in a Repeater

This morning I came across a really well written new Blog by Miron Abramson on ASP.NET. One of his early entries is a method to Highlight the row in a GridView control as the mouse passes over it. I particularly like the way he abstracts the functionality out.

But as many of you know I am not a big fan of the GridView because of how bloated it becomes, but that is another story. I prefer the Repeater to show tabular data because it tends to force you to have much more control over the output. Because the Repeater is a Template driven data control you cannot employ the same method to highlight the row as the mouse passes over it.

This really needs to be done in the layout template itself. I typically will use a table, which means you need to control the row or TR element of the row. This can be done pretty easy by adding the inline script for the mouseover and mouseout event handlers.

<tr onmouseover="this.style.background='#303030';this.style.color='#FFFFFF';"
     onmouseout="this.style.background='#FFFFFF';this.style.color='#000000';">

This example shows how to set the background to an dark gray with a white font. Of course you can do anything you want as far as a color combination.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel