iTunes Data Grid Skin

I am playing around with a couple new data grid skins roughly based on what iTunes looks on my Vista box.  Here is how it is looking so far ...

iTunes on Vista ...

image  

My iTunes data grid ...

image

Live Demo | Download

 

Blue and Gray Skins

I actually created 2 slightly different skins- a blue and a gray one.  The gray one is above and is a little bit darker.  The blue one is slightly softer and looks like this ... 

image

 

The Markup

The markup for the grid consists of a HTML table with wrapped in a DIV.  I am using the odd/even classes for zebra striping and I also have a DIV above the TABLE for the title bar. 

   1: <div class="grid">
   2:     <!-- title bar ... -->
   3:     <div class="title">The title goes here</div>
   4:     <table class="datatable" cellpadding="0" cellspacing="0">
   5:         <thead>
   6:             <!-- header row goes here -->
   7:             <tr>
   8:                 <th>First Name</th>
   9:                 <th>Last Name</th>
  10:             </tr>
  11:         </thead>
  12:         <tbody>
  13:             <!-- data rows go here -->
  14:             <tr class="even">
  15:                 <td>Matt</td>
  16:                 <td>Berseth</td>
  17:             </tr>
  18:             <tr class="odd">
  19:                 <td>Tony</td>
  20:                 <td>Montana</td>
  21:             </tr>                    
  22:         </tbody>
  23:     </table>
  24: </div> 

 

The Images

Each skin makes use of 4 images.  2 sort arrows (ascending and descending), the default header background image and a different background gradient when the column is the sort.

Sort Icons:

Gray Theme Header Background:

Blue Theme Header Background:

Active Sort Header Background: 

 

Sorting

I am currently using the jQuery tablesorter plugin to provide client-side sorting.   

 

Generating the Markup

Because of the flexibility you have over the rendered markup, generating the above HTML for the grid is pretty easy using jTemplates or even ASP.NET's ListView control (the demo and download have examples for each).  Using the tablesorter plugin to provide client-side sorting for an ASP.NET GridView requires a little more work.  The GridView doesn't render the THEAD element by default, but the tablesorter plugin requires it to work properly.  So to use the tablesorter with an HTML table rendered by the GridView, you will need to write a small bit of code that will move the header row from the TBODY into the THEAD.

You can do this on the server using these instructions ...

Or, you could do it on the client using jQuery's DOM manipulation API like so ...

   1: //  fix up the gridview so its header row is in a thead 
   2: //  and the rows are in a tbody ...
   3: $('#gridView .datatable').prepend(
   4:     //  remove the header and wrap it in a THEAD
   5:     $('<thead></thead>').append($('#gridView .datatable TR.header').remove())
   6: );

 

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/159

Comments


Posted by: Claus on October 26, 2008 06:52 PM

This is totally awesome. Thanks!

Matt,

Great post. Thanks for providing options to make this work with all the different controls. The tablesorter plugin is awesome. I have run into a few things with it though that you might want to checkout http://beckelman.net/post/2008/10/24/Checkbox-Parser-and-Bug-Fix-for-jQuery-TableSorter-Plugin.aspx

Bill

Posted by: Vishal on October 27, 2008 12:05 AM

Hi Matt,

Thanks. Excellent Post.

I will surely implement this in new project.

Posted by: Jaweed on October 27, 2008 10:35 AM

Nice post. What tool do you use for designing the Images.

Posted by: Lee Dumond on October 27, 2008 11:24 AM

Just wondering...

Wouldn't it have been more semantically meaningful to use the table's caption tag for the title, rather than a div?

And also, why use TWO classes for zebra striping? Seems to me one could use a selector to style all rows, then use a single class for the alternating color.

Posted by: Josh E. on October 27, 2008 11:38 AM

As always Matt, great stuff. One thing about the GridView's headers, however: a lot of people miss the "UseAccessibleHeader" property of the GridView; setting that property to true will cause the GridView to render the TH tags appropriately.

That's so badass! Nice skin!

@Bill -
Thanks Bill, I appreciate the info.

@Jaweed -
Paint.NET. I highly recommend it. I bet I spent less than 10 minutes total creating the background images and sorting icons.

@Lee Dumond -
Yea it would have been, but not so easy to style. I haven't decided on a pager control yet, but it might end up going in the titlebar so I wanted to keep my options open ...

And I used the odd/even classes because the tablesorter's zebra widget will automatically reapply these classes after the rows are sorted. If I didn't use the odd/even classes I would have had to have some sort of post-sort logic that makes sure my zebra stripes get applied again. I figured I would just use the zebra widget since it is included with the tablesorter core anyway.

@Josh E -
Thanks Josh. I didn't know this either until I read up on how Ponnu was getting the TH row grouped into a THEAD element.

@Jared -
Thanks Jared. I gotta say I was pretty happy with how this one turned out ...

Posted by: Pyccki on October 27, 2008 10:26 PM

Good Staff. I'll try later

Posted by: Josh E. on October 28, 2008 10:55 AM

Matt,

Yeah the property name isn't the most intuitive, and I only found out about it when writing some pseudo-templating client code for a gridView. Not sure why it doesn't just have the property TRUE by default.

Posted by: Prashant on October 29, 2008 04:31 PM

Hi Matt,

I have gone thru all of your post.

Great job

THANK you ever soo much for all your great posts! You're giving world-class exammples that works. Much appreciated!

I am right now using this iTunes styled DataGrid and I have a small issue with sorting.

I have a numerical column that I format as this:

xxxxx.ToString("### ### ###")

When I sort this column things get messy. It seems as if the sorting looks at the spaces. For example, when I sort a column with the following values this is what the order looks like:

1 239 443
12 082
285 312
499 090
513 713

I do understand that this is probably in the Tablesorter domains but as I am a total novice when it comes to jQuery/JavaScript I ask here...

Any ideas are most welcome ;-)

Cheers,
Joakim

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Joakim Westin wrote: THANK you ever soo much for all your great posts! You're giving world-class exammples that works. Mu...
  • Prashant wrote: Hi Matt, I have gone thru all of your post. Great job...
  • Josh E. wrote: Matt, Yeah the property name isn't the most intuitive, and I only found out about it when writing s...
  • Pyccki wrote: Good Staff. I'll try later...
  • Matt Berseth wrote: @Jared - Thanks Jared. I gotta say I was pretty happy with how this one turned out ......
  • Matt Berseth wrote: @Bill - Thanks Bill, I appreciate the info. @Jaweed - Paint.NET. I highly recommend ...
  • Jared Roberts wrote: That's so badass! Nice skin!...
  • Josh E. wrote: As always Matt, great stuff. One thing about the GridView's headers, however: a lot of people miss t...