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.
The title goes here
First Name Last Name Matt Berseth Tony Montana
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 …
// 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!