How to actively highlight a GridView row with JQuery

In a project, recently, I wanted to switch over to using the CSS Friendly Control Adapters to get the GridView to render its TR’s and TD’s with a CSS class so that all the styling could be dropped into a style sheet. The reason for doing this was because we wanted to highlight the row underneath the mouse by leveraging JQuery magic, thus improving the end user experience when there are many rows (See image below)



The problem with the CSS Friendly Control Adapters is the all or nothing behaviour. Once you activate them in your project, they have global effect. I went looking for a mechanism that would allow me to turn off the effect on a per GridView basis and was initially excited to see the GridView attribute AdapterEnabled="false"...but after a short test, it became apparent that it doesn’t work!

So, I decided to dump the CSS Friendly Control Adapters and go for a home grown route instead.

The first thing to do is to *remove* <RowStyle> and <AlternatingRowStyle> elements in the GridView and add a CssClass=”selectableGridView” (see image below):



If you fail to remove these elements, they produce HTML as seen below (see how the element gets translated into a style='....' in the HTML)

....and don't forget to add the CssClass=”selectableGridView” to the GridView (as marked in the green square)



The reason for removing them is because we’re going to be using JQuery to add a class dynamically to the row when the mouse is over it and this will have no effect whatsoever if the local styling is left in place. By the way, there's another bonus for doing this and that's to reduce the size of the page which will therefore increase page load time.

So, the JQuery code looks like this:




The JQuery code has two jobs it must do. First, it needs to put back the row style and alternating row style. This is done with the following code:

$('.selectableGridView tr:odd').not(':has(th)').addClass('SelectableGridViewAlternateRow');

$('.selectableGridView tr:even').not(':has(th)').addClass('SelectableGridViewRow');

The first line applies the alternating row style via the class .SelectableGridViewAlternateRow and the second line applies the normal non alternating row style via the class .SelectableGridViewRow. We need to be careful not to include the rows that are in the table header, hence the .not(':has(th)') selector to filter those guys out.

The next piece of JQuery magic is to highlight the row underneath the mouse.

$('.selectableGridView tr').not(':has(th)').mouseover(function() {

$(this).addClass('SelectableGridViewHighlightRow');}).mouseout(function()
$(this).removeClass('SelectableGridViewHighlightRow');});

Again, we simply filter out the rows in the header and then apply the .SelectableGridViewHighlightRow class in mouseover and then remove it in mouseout.

To finish up, the style sheet sets up the rules needed to bring it all together