Matt Berseth

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!