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
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.
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.
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
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.
Put it All Together
And here is the markup for my GridView.
That's it. Enjoy!
Comments
Your blog is fantastic !
You explain with lots of details.
Great blog !!
looks very stylish, thanks matt..
Excellent, thank you.
Thank you for example.
You have a sample for menu using this same theme?
Thank you again
@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
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?
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
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
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?
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.