Building a VS2008 Styled Grid with the GridView Control

I received some positive feedback from my most recent post describing how to create a VS 2008 styled datagrid by using ASP.NET's ListView and DataPager controls.  A few people left comments, but I also received a handful of emails asking how to achieve this same look using the GridView.  So while this VS style skin was still fresh in my mind I thought I would write up a quick post on it. 

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

image  

Sorting

To apply the custom sorting icon to the datagrid's header, I used the GridView's RowDataBound event to apply a custom CSS class to the header cell.  I then use the background image style to apply the sorting icon to the right of the header text.

image 

Border

Just like in my previous post, I use a series of DIV's to define the datatables frame.  I then use CSS to apply background images to these DIVs.  Put it all together and you get a sweet looking border.

image 

Pager Style and Settings

The GridView control allows you to customize how the pager controls look by using the PagerSettings element (if you require even more customization you can use the PagerTemplate).  It supports a handful of modes and provides other attributes that can be used to change the appearance of the pager row.  Here is a table that describes the supported modes of the PagerSettings 

image

Unfortunately, there isn't a NextPreviousFirstLastNumeric mode, because that is actually the one I would use.  However, the NumericFirstLast mode is pretty close so that is what I used to configure my grid.

image

Put it All Together

And here is the markup for my GridView. 

image  

That's it.  Enjoy!


TrackBack

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

Listed below are links to weblogs that reference Building a VS2008 Styled Grid with the GridView Control:

» A Styled GridView from Stone Coast Web Design's Weblog
[Read More]

» Building Custom Paging with LINQ, from Moses's Blog
Building Custom Paging with LINQ, ListView, DataPager and ObjectDataSource [Read More]

Comments


Posted by: Duarte Pinto on April 7, 2008 12:00 AM

Your blog is fantastic !
You explain with lots of details.

Great blog !!

looks very stylish, thanks matt..

Posted by: Anonymous on April 8, 2008 12:00 AM

Excellent, thank you.

Posted by: Paulo Henrique on April 15, 2008 12:00 AM

Thank you for example.

You have a sample for menu using this same theme?

Thank you again

Posted by: Nisar Khan on April 16, 2008 12:00 AM

@Matt
thanks for the post but i do have small problem and im using custom collections and i get this error when i do sorting:

"
the data source does not support sorting with IEnumerable data. Automatic sorting is only supported with Dataview, DataTable, and DataSet
"
what would i do to work sorting? in custom collections? any suggustions

thanks

Posted by: Carl Xu on April 17, 2008 12:00 AM

thangk you~
i find it more useful

Great stuff, I really dig it.

Excellent Blog!!!!
is it possible to add Keyboard Navigation funcionality to vs2008 Lisview?

Posted by: Chau on May 15, 2008 12:00 AM

Matt,

I know its wrong to ask? Do you have black and gray version of the images?

If would really help me with my application design.

Thanks,

Chau

Posted by: Karthikeyan on May 20, 2008 12:00 AM

Thanks ,your works are fantastic ..

the data source does not support sorting with IEnumerable data. Automatic sorting is only supported with Dataview, DataTable, and DataSet what would i do to work sorting? in custom collections? any suggustions

Posted by: ONUR on September 17, 2008 08:34 AM

It's spectecular grid I love this thank a lot

I am using themes and I like this style for many of my grids in my themes, how would I go about applying this style in a theme?

Posted by: Ted G on October 28, 2008 07:23 PM

You Da Man, Matt, thanks very much for putting this together. Nice job on the design work, too--I suck at that.

I'm going to tweak the images to my liking, and I've plopped the whole thing into a panel and tweaked the css to use vertical scrolling as well. It looks really good!

Many 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

  • Ted G wrote: You Da Man, Matt, thanks very much for putting this together. Nice job on the design work, too--I s...
  • Scott Tomassetti wrote: I am using themes and I like this style for many of my grids in my themes, how would I go about appl...
  • ONUR wrote: It's spectecular grid I love this thank a lot ...
  • laptop ac adapter wrote: the data source does not support sorting with IEnumerable data. Automatic sorting is only supported ...
  • Karthikeyan wrote: Thanks ,your works are fantastic .. ...
  • Chau wrote: Matt, I know its wrong to ask? Do you have black and gray version of the images? If would really h...
  • Gustavo Camps wrote: Excellent Blog!!!! is it possible to add Keyboard Navigation funcionality to vs2008 Lisview? ...
  • Adron wrote: Great stuff, I really dig it. ...