4 New Grouping Grid Skins: Vista, Bold, Win2k3 and Soft

Nearly 6 months ago a wrote a post showing how you can use ASP.NET 3.5's new ListView and LinqDataSource controls to create a pretty sweet looking grouping grid.  Well I recently created a few additional skins for my original grid that I thought I would share.  You can follow the link to the demo site to see them in action and if you are interested in learning more you should read my original post and then download the sample site and step through some of the code.

All of the themes use exactly the same markup.  All images (including expand/collapse icons, sorting icon and pager icons) are controlled via CSS.  My original post used ImageButtons, but I replaced these with LinkButtons.  This seems to be working out pretty well - I can use the CommandName and CommandArgumnet properties to hook into some the ListView and DataPager's advanced features, but I can also move the image reference to the stylesheet.

I am pretty happy with how these look, but I am still thinking I need to make a few changes ...

  • I need some sort of progress indicator.  I would like to try adding the Vista themed one I wrote about last week to the bottom status bar of the Vista themed grid.  I am betting that would look pretty awesome.
  • I need to do something else with the sort indicator in the header (it probably isn't that obvious but clicking this icon sorts the groups by their key - CustomerID for my sample grids).
  • I used 2 types of pager buttons (Vista and Bold use the same buttons and so do Windows 2003 and Soft).  I like how the buttons work with the Soft skin but I could probably find some better ones for the others

Let me know what you think ...

Live Demo (IE6, IE7, FF, Opera) | Download

 

Vista

image

 

Bold

image

 

Windows 2003

image

 

Soft

image

That's it.  Enjoy!


TrackBack

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

Listed below are links to weblogs that reference 4 New Grouping Grid Skins: Vista, Bold, Win2k3 and Soft:

» Sorting Data in the Silverlight DataGrid from Scott Morrison
This post is one in a series of posts outlining the new functionality delivered in Silverlight 2 Beta [Read More]

» Sorting Data in the Silverlight DataGrid from Scott Morrison
This post is one in a series of posts outlining the new functionality delivered in Silverlight 2 Beta [Read More]

» 4 New Grouping Grid Skins for ListView: Vista, Bold, Win2k3 and Soft from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


Thank you!!!!!!!!!!

Posted by: Noor on August 19, 2008 02:40 PM

Great job. I love your website and your thoughts.
I need one help can you please provide sample code how to apply this effect to nested gridview in asp.net 2.0 and VS 2005 with one difference so that only selected or clicked row is expanded i mean only one row expanded at a time and not all the rows being expanded at once.

Looking forward for your kind help.

Thanks in advance.

Posted by: Hemal on August 29, 2008 02:16 PM

HI Matt
you have done greate job but only one request that can you provide me Nested grid view in ASP.Net 2.0 and VS 2005.

Posted by: chris on October 16, 2008 07:49 AM

Nice job. Do you have any good links on how to make the header images?

Thanks.

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

  • chris wrote: Nice job. Do you have any good links on how to make the header images? Thanks....
  • Hemal wrote: HI Matt you have done greate job but only one request that can you provide me Nested grid view in AS...
  • Noor wrote: Great job. I love your website and your thoughts. I need one help can you please provide sample code...
  • Timur wrote: Thank you!!!!!!!!!!...