Building a VS2008 Styled Grid with the ListView and DataPager Controls
I took a break from my recent Silverlight explorations to work on a new datagrid skin. I thought the skin turned out fairly well so I figured I would pass it along just in case anyone else could find a use for it. Like some of my other skins, it makes use of ASP.NET 3.5's ListView, DataPager and LinqDataSource controls.
Here is the run down of the features ...
- VS 2008 style border blue border
- Vimeo-ish style data pager
- Row hover effects (except for IE6)
- Sort icons
VS 2008 Style Border
To create the border, I used a variation of the rounded corners technique Josh outlines here. Below is the markup. It is pretty much just a handful of DIV elements that are used for holding the images. If you are thinking about using this technique, you should check out Josh's site to get the run down. After you finish that you can check out this post to see how it can applied to place a border around a datagrid.
<div class="rounded"> <div class="top-outer"><div class="top-inner"><div class="top"></div></div></div> <div class="mid-outer"><div class="mid-inner"><div class="mid"> <div class="content"> <!--Content goes here--> </div> </div></div></div> <div class="bottom-outer"><div class="bottom-inner"><div class="bottom"></div></div></div> </div>
And here are the images I have mapped to the above DIV tags. I zoomed in a bit on the images so you could get a better idea of how they make up the border.
|Content Goes Here!|
Vimeo-ish Style Data Pager
The data pager is roughly based on the one found on Vimeo's site. Again, nothing too much new here except the mouse over effects. I personally love this style of pager - it looks great AND it doesn't require any images.
Row Hover Effects
Finally, I used the hover pseudo class to make the mouseover row stand out a little bit. To help differentiate it from the other rows I added a blue triangle to the rows first cell, changed the font color from #666 to #000 and applied a light yellow background.
To apply the triangle to the first cell, I used the ListView's ItemTemplate to apply the first class to the first TD of each data row.
Then, I could use this class in combination with the hover pseudo class to get the triangle to appear only when the row is moused over.
That's it. Enjoy!