Striped GridView the Easy Way w/ jQuery

other-069 I can’t tell you how many times I’ve seen code that attempts to do the alternating color thing on a GridView by setting the classes at the server level by interrupting the ItemBound event and rewriting the html.

And if you want to provide a rollover effect, you also need to wire in some javascript.

It works, but now that we have javascript, there is an easier way.

All we need is some handy dandy selector magic in jQuery so that we can apply one class to our odd rows and another class to our even rows, a special class for our header and footer and a rollover class.

For this example, I’ve created four classes in my CSS file:

even: describes how all the even rows should display.
odd: describes how all the odd rows should display.
header: describes how the header and footer should display.
hover: describes how the rollover should display.

I’m not going to bother showing the code for those since it’s pretty basic. What we want to concentrate on is the jQuery. I will mention that it is important that the hover class comes last in your CSS.

The first thing we want to do is to select all the even rows and add the “even” class to them and then do a similar selection and add for the “odd” classes.

$("table tbody tr:even").addClass("even");
$("table tbody tr:odd").addClass("odd");

For now we won’t worry about the fact that the header and footer have also been selected and classed–we’ll remove that at the end. The next thing we want to do is provide the rollover code. For this, we’ll select all the TRs and provide a mouse-over and mouse-out function.

$("table tbody tr").mouseover(function() {
    $(this).addClass("hover");
}).mouseout(function() {
    $(this).removeClass("hover");
});

At this point, all of our rows will also display differently when we mouse over. But we still have that header and footer to deal with.

What we need to do is to select the first TR tag and add the header class and remove the mouse-over/mouse-out code as well as the even class so that the header behaves like a header.

$("table tbody tr:first").
    addClass("header").
    removeClass("even").
    removeClass("odd").
    unbind("mouseover").
    unbind("mouseout");

Note the tr:first code above; that’s what selects the first TR.

The next thing we want to do is to select the last TR in the table and remove the formatting and rollovers for it. Here’s where it helps to know exactly what the selectors are doing. You’re probably thinking, “Hey, we must use tr:last for that.”

If you thought that, you’d be wrong. But it is a great guess.

The problem is that tr:last says “pick the very last tr tag that you can.” Unfortunately, because of the way the GridView is set up the footer row has a nested table in it. So tr:last would pick the last tr tag in that inner table (which is also the first tr tag) Instead, what we want is tr:last-child, which picks every last tr that is a child of its parent. This will also pick the very last tr like tr:last, but it will allow us to select the last TR tag of the main table. Once that is selected we can remove and add classes like we did with the tr:first code.

$("table tbody tr:last-child").
    addClass("header").
    removeClass("even").
    removeClass("odd").
    unbind("mouseover").
    unbind("mouseout");

Note: it wasn’t really necessary to remove the mouse-out binding, but why leave code bound when it doesn’t need to be?

If you need to style various GridViews separate from other tables in your system, I suggest you use CssClass to assign a class to your GridView and make that class part of your selector statement. But with this code you can easily provide functionality that used to take quite a bit of code smarts to get working.

Most Commented Post

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear