Cannot find gridview row with jQuery skin

Question

My jQuery script does not work when I have a skin applied to my gridview. Once I add in the skin I cannot find the tr anymore. I assume it has something to do with the way the tr gets constructed. Without the skin, the row is a clean

    <tr>data</tr>.

But with the skin the row is now

<tr style=....>data</tr>

Here is my jQuery that does work when I do not have skin applied to the gv.

 $(document).ready(function () {
        $('tr').mouseover(function () {
            $(this).toggleClass('highlightrow');
                }).mouseout(function() {
                    $(this).removeClass('highlightrow');
                })
    });

score 1 · Answer 1 · answered Apr 03 '11 at 14:41

1

I bet it is due to style having higher priority than your css. How is your highlightrow defined? For example if you specify a background-color here and it is also in the tr's style, it gets ignored.

Maybe adding the !important clause could help:

.highlightrow
{
    background-color: Red !important;
}

answered Apr 03 '11 at 14:41

František Žiačik

7,511
1
34
59

that does work. The only down side (minor) is that it highlights the table head too. Never knew of the !important clause. I wonder about it's browser support? – IMAbev Apr 03 '11 at 15:01
1

@IMA here is explanation: http://stackoverflow.com/questions/189621/when-does-csss-important-declaration-not-work – Shadow The GPT Wizard Apr 03 '11 at 15:16
1

@IMAbev: about !important support: http://stackoverflow.com/questions/1330184/what-browsers-support-important – František Žiačik Apr 03 '11 at 15:16

score 1 · Accepted Answer · answered Apr 03 '11 at 14:42

1

The rows are found just fine, problem is that they have "hard coded" background color in their style so the background color in the class has no effect.

One way around this is to store the previous color then directly set the background color in mouseover and restore the previous color (to preserve the skin) in the mouse out event.

Code would look like:

$(document).ready(function () {
    $('tr').mouseover(function () {
        $(this).data("prev_color", $(this).css("background-color"));
        $(this).toggleClass('highlightrow').css("background-color", "yellow");
    }).mouseout(function() {
        $(this).removeClass('highlightrow').css("background-color", $(this).data("prev_color"));
    });
});

Live test case: http://jsfiddle.net/yahavbr/awEaP/1/

answered Apr 03 '11 at 14:42

Shadow The GPT Wizard

66,030
26
140
208

thanks! Works great. I just added $('tr:not(:first)').mouseover(function () { to avoid highlighting the header. – IMAbev Apr 03 '11 at 15:06
@IMAbev cheers, glad I could help and thanks for sharing this useful information! :) – Shadow The GPT Wizard Apr 03 '11 at 15:17
fyi I had multiple gridviews on a page all with .gridlink class. tr:not(:first) only effects the first gridview. I changed to tr:not(:firstchild) and it highlighted only the rows on all gv's - not the headers – IMAbev Apr 03 '11 at 20:06

Cannot find gridview row with jQuery skin

2 Answers2