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 …


My iTunes data grid …


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 …


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.

The title goes here
First Name Last Name
Matt Berseth
Tony Montana

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:


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 …

 //  fix up the gridview so its header row is in a thead  //  and the rows are in a tbody ... $('#gridView .datatable').prepend(     //  remove the header and wrap it in a THEAD     $('').append($('#gridView .datatable TR.header').remove()) ); 

That’s it. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

WP Like Button Plugin by Free WordPress Templates