Using jQuery to Highlight Selected ASP.NET DataGrid Row

Question

Hi,

It is easy to highlight a selected datagrid row, by for example using toggleClass in the tr's click event. But how best to later remove the highlight after a different row has been selected? Iterating over all the rows to unhighlight them could become expensive for larger datagrids. I'd be interested in the simplest solution, as well as the most performant.

Thanks,
Mike

Answer 1

If you just want to find items that have toggledClass and turn that off using jQuery:

$('.toggledClass').removeClass('toggledClass');

Answer 2

For faster performance, you could push your selected element's ID into a var (or an array for multiples), and then use that var/iterate over that array when toggling the classes off.

Answer 3

This method stores the active row into a variable. The $ at the start of the variable is just my own hungarian notation for jQuery objects.

var $activeRow;

$('#myGrid tr').click(function() {
    if ($activeRow) $activeRow.removeClass('active');
    $activeRow = $(this).addClass('active');
});