Home » none » Striped GridView the Easy Way w/ jQuery

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.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • Conditional Footnotes On GridViewConditional Footnotes On GridView A couple of days ago I ran into a requirement to conditionally display footnote information at the bottom of a GridView display.  We were already conditionally displaying icons in the […]
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • AjaxToolKit TabControl Disabled TabAjaxToolKit TabControl Disabled Tab I just finished an interesting project that involved the AjaxToolKit's Tab control.  The first part of my assignment was to make the Tabs start about 160 pixels to the right of the left […]
  • GridView and Updating A Row ManuallyGridView and Updating A Row Manually A couple of days ago I mentioned a project that I’ve been working on that is a bit out of the ordinary as far as GridViews go.  One of the issues I’ve had is that the edit template […]
  • Virtual Files using HttpContext.RewritePath()Virtual Files using HttpContext.RewritePath() One of the cool new tricks we are able to perform in ASP.NET that we were not able to use in ASP is the ability to have ASP.NET redirect file requests in the same way that mod_rewrite does […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.