Matt Berseth: 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

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

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!

Comments

Lookin' good! For what it's worth, you could have combined the top and top-right images, as well as the bottom and bottom-right images and eliminated the extra empty DIV tag by using the sliding doors technique.

Although I think you are already aware of this approach. It's still nice to see an alternative technique such as this, which might actually be more efficient because of the smaller images.

Personally, I prefer the sliding doors. Probably because I find coding more fun than image slicing :)

Best regards...

Posted by: Josh Stodola | April 1, 2008 11:02 PM

Nice work Matt. I like the silverlight stuff, but completely enjoy all of your .Net especially 3.5) posts. Once again, brilliant.

Posted by: Jared Roberts | April 1, 2008 11:58 PM

Your Ajax Articles and Samples are the best on the web.

Keep up the Good Work!!!

Posted by: Stuart Shay | April 2, 2008 01:33 AM

Great stuff, Matt:-)
but what do I do if I do not want to use

or use the DataSourceId="...", but rather bind it in the codebind
lvProducts.Datasource = getdata(); etc.

Posted by: Peter | April 2, 2008 03:00 AM

Matt,

Again, EXCELLENT work! I've been archiving your posts for a while for inspiration. 8^D

Two quick questions:

1. Is is possible to see a "finished work" of one of your projects. I realize that you have some Intranet stuff and most likely some private data, but even if you were to blur out the record lines, I'd love to see how your datagrids, pagers, query input, etc. all comes together on a single page.

2. I've noticed a lot of your datagrid examples use the "inline" data binding method on the aspx page. Do you find this a better method for a lot of the CSS type work, do you get better performance, or is it more for easier code examples here. I've been using the RowDataBound method for a while now and done all of my template/custom binding that way and like what I can do that way. However, I'm always game for upping my skills and was curious as to your preference.

Keep up the great work!

Posted by: Sean Patterson | April 2, 2008 10:07 AM

Good to see you back on the grid / design postings and taking a break from Silverlight.

Posted by: Kevin Jensen | April 2, 2008 02:44 PM

My styling skills are going to get better because of you ;o). Good one once again Matt!

Posted by: Muhammad Mosa | April 3, 2008 07:40 AM

@Josh -
Yep. I have been trying a few different varations all based on your original template. Still trying to figure out which way I like the best.

Posted by: Matt Berseth | April 3, 2008 05:52 PM

Hi Peter -
That shouldn't be a problem. If you are having troubles getting it to work - shoot me an email and I will take a look at it.

Matt.

Posted by: Matt Berseth | April 3, 2008 05:57 PM

Sean -
Interesting idea ... I think I could sneak a few screen shots into a blog post without too many people noticing ;)

I see the databinding expressions as parameters and the markup as the template - so inlining calls to Eval and Bind feels natural to me.

Posted by: Matt Berseth | April 3, 2008 06:34 PM

Hi Muhammad -
Good to hear. I've been by your site a few times and noticed some of the cool stuff you are building. Keep it up!

Posted by: Matt Berseth | April 3, 2008 06:37 PM

I really enjoy your blog. Thank you posting all of the great work that you do. I look forward to looking through the archives.

Posted by: Joel | April 8, 2008 08:09 PM

Great work... simple trick of layout done the job... good thinking...