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 ...
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 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.
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.
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 ...
That's it. Enjoy!