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

image

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.

image 

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.

image

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. 

image

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.

image

That's it.  Enjoy!


TrackBack

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

Listed below are links to weblogs that reference Building a VS2008 Styled Grid with the ListView and DataPager Controls:

» Matt Berseth: Building a VS2008 Styled Grid with the ListView from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


Lookin good! For what its 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. Its 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: Jared Roberts on April 1, 2008 12:00 AM

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

Posted by: Stuart Shay on April 2, 2008 12:00 AM

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

Keep up the Good Work!!!

Posted by: Peter on April 2, 2008 12:00 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.

?

Matt,

Again, EXCELLENT work! Ive 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, Id love to see how your datagrids, pagers, query input, etc. all comes together on a single page.

2. Ive 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. Ive 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, Im always game for upping my skills and was curious as to your preference.

Keep up the great work!

Matt,

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

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

@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.

Hi Peter -
That shouldnt 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.

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.

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

Matt.

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

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

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

Great Work!!!
Thanks.

Posted by: doez on April 25, 2008 12:00 AM

thanks

Posted by: Jason on June 26, 2008 12:00 AM

Hi Matt,

I must say you do some really incredible work, especially when leveraging the existing technology and customizing it for your needs. One great example is the NiftyCornersExtender since Microsoft decided not to implement anti-aliasing lol. I was just wondering, Ive started working with AJAX for a while now (about 3 or so months) but just wanted to know what you recommend for books, articles, on-line learning, etc. Theres just too many books and I want to get quality over quantity.

Any suggestions would be great!

Thanks in advance Matt!

Jason

Posted by: Balaji on July 2, 2008 12:00 AM

Good skin work

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

Hats off !!!

Posted by: drgalal on July 20, 2008 12:00 AM

dear dave thanks for the great desc.
i got a trouble which i think it related to your poste and i hope you help me.Simply i got a page with datalist of the categories from one tabel .with a modal popup control extender that popup a panel with grid view in it diplaying the products for the selected category from another linked tabel .i made an onpage web service to send the category id from the selected category on the mother datalist to text box present on the popup.then i set the textbox.text as a parameter for the sql data source that fill the grid view.i put the grid view and the text box in an update panel ..here is the problem when i select the category from the select button of datalist the popup open with the text box displaying the wright category id but the grid view display the empty data template. may be because the data grid load before the web service deliver the category id into the text box so the parameter is empty…within my diagnosisi to the problem when i add a category number by hand to the text box and press enter.evry thing is work fine and the grid display the wright data pleeeeeaaaaaassssse help the novice

Posted by: chandra on July 22, 2008 12:00 AM

Matt,

Excellent Blog and am grateful to you for sharing your work. Id like to suggest a small change to make this gridview even look better. The gradient background behind the title bar doesnt appear smooth. If you canvas the size of tm.gif image from 23x5 to 23x1 with photoshop and repeat in x direction, youd get a smooth gradient.

Thanks,
Chandra

Posted by: karthik on October 22, 2008 01:08 AM

i want gridview with filtering option.
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

  • karthik wrote: i want gridview with filtering option. thanks...
  • chandra wrote: Matt, Excellent Blog and am grateful to you for sharing your work. Id like to suggest a small chang...
  • drgalal wrote: dear dave thanks for the great desc. i got a trouble which i think it related to your poste and i ho...
  • Balaji wrote: Good skin work Your Ajax Articles and Samples are the best on the web. Hats off !!! ...
  • Jason wrote: Hi Matt, I must say you do some really incredible work, especially when leveraging the existing tec...
  • doez wrote: thanks ...
  • Abhijeet Rajwade wrote: Great Work!!! Thanks. ...
  • Masudur wrote: Great work... simple trick of layout done the job... good thinking... ...