March 17, 2009

HTML/CSS-Only Data Pager Control

After reading these two articles I thought it would be interesting to see if I could this technique to create a HTML/CSS-only (i.e. no background images) data pager control. Here are some screen shots of what I came up with (the second and third screen shots show the roll-over states) … You can check out the live demo here.  I tried it in the major browsers (FF, Opera, IE7, Safari and Chrome) and it worked great.  Unfortunately it looks like crap in IE6 … If you didn’t know it was possible to render angled shapes using straight HTML/CSS - I recommend checking out the following articles … Using borders to produce angled shapes A Study of Regular Polygons   That’s it.  Enjoy!...

April 08, 2008

Using a DataPager with the GridView Control - Implementing IPageableItemContainer

One of the new controls that shipped with ASP.NET 3.5 is the DataPager.  It's a flexible control that renders the paging elements data-bound controls that implement the IPageableItemContainer interface (currently only the ListView control).  The big change with the DataPager is that it is decoupled from the data-bound control it provides paging support for.  It can be embedded somewhere within the data-bound control's control hierarchy (like contained within the LayoutTemplate of the ListView), but it doesn't have to - It can exist on its own outside of the data-bound control as well. When I was writing my last post, I kind of wished the 3.5 GridView implemented the IPageableItemContainer interface.  It sure would have made things simpler for me.  So I thought I would take a shot at extending the GridView myself.  Read on for the details. Live Demo (IE6, IE7, FF, Opera) | Download      Implementing IPageableItemContainer This is a...

April 01, 2008

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

February 21, 2008

Building Sleek, Soft and Simple DataGrids

Last November Josh Stodola wrote a detailed post discussing how great looking fluid-width rounded corners can easily be created using Paint.NET, a handful of DIV tags and a small amount of CSS.  The basic technique Josh outlines isn't new, but he does a great job walking through the steps with just the right amount of detail.  I remember reading the article sometime after I struggled through creating an AjaxControlToolkit control based on NiftyCorners (being completely uncreative, I called my custom extender control the NiftyCornersExtender) and I found it very interesting.  I recently went back through and re-read Josh's article this past week and went through his tutorial again. It turns out this was great timing - I am working on a project where the client has requested a sleek, soft and simple interface - those were their exact words.  So I used Josh's tutorial to frame a couple of my...

January 18, 2008

Creating a FrequencyDecoder.com Style Grid with the ListView, DataPager and LinqDataSource Controls

One of the projects I am working on is on the verge of failure.  For a while now the writing has been on wall, but this was the week that everyone finally realized it.  Its a rotten feeling and I hate it.  So to cheer myself up and to keep the creative juices flowing I thought I would play around a little bit with ASP.NET 3.5's new ListView, DataPager and LinqDataSource controls.  A while back, I came across a really nice looking data grid that I wanted to create a ListView skin for.  Besides the nice soft blue color scheme, I liked the data grid's sorting icons, all caps headers, alternating row styles as well as the simple text-based data pager.  So I used the ListView and DataPager controls to build the visual elements of the data grid and used the LinqDataSource to source the grids data.  I have written...

December 23, 2007

A Slider DataPager with Dynamic Tooltips

A few weeks ago I wrote a post explaining how the AjaxControlToolkit's Slider control could be used as a data pager.  One of the teams I am currently working with has adopted this approach and is implementing it throughout their site.  While this technique seems to work well, one feature the team would like to add is a custom tooltip that not only displays the typical paging statistics (i.e. page X of Y), but also gives the user a hint as to what can be found on each page of data.  It's this last bit of information that increases the value of the tooltip.  Not only are we showing the user the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.  Below is a screen shot of how this looks.  Live Demo (IE6, IE7 and...

December 06, 2007

Surrounding your Data Table and Dialog Controls with ComponentArt Styled Panels

As far as web development goes, I came a little late to the party.  I started life as a developer working on the absolute guts of a fairly complex object persistence engine.  At my next stop I hand-coded an obscene number of business objects that fed our presentation layer (which is pretty ironic considering I just worked on an ORM!).  Needless to say I didn't stay at that place too long.  From there I finally took a stab at user interface when I took a gig as a WinForms developer.  I did that for a little over a year and it was OK.  Finally I ended up where I am now, about 60% of my day to day activities includes web developer on Microsoft's ASP.NET 2.0 platform.  I did a little bit of web development with 1.1, but nothing substantial.  Hands down, I enjoy web development the best (I have never once been complimented on how nice...

December 02, 2007

Data Navigation with the ListView, DataPager and SliderExtender Controls

As I mentioned in a previous post, I am currently researching what advantages ASP.NET 3.5's new ListView control would have over the GridView.  To continue down this path, I thought it would be a good idea to look into how paging work with the ListView.  To direct my research, I created a sample data table that supports paging via the standard paging buttons as well as with a slider bar.  Below is a screenshot of the table.  As usual you can follow the links below to view the live demo as well as download the code. Download (.Net 3.5 and AjaxControlToolkit 3.5.11119.0) | Live Demo (IE6, IE7 and FF) If you are interested in the implementation details, they are outlined below. Overview of the DataPager Control Before today, I had not yet worked with the DataPager.  So to start off, I went out to MSDN's documentation and read through it.  To summarize MSDN, the DataPager can be used to display paging navigation controls...


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

  • TimothyP wrote: I work with tons of developers who haven't even got a clue what Twitter of Facebook is. In fact, it'...
  • Janko wrote: Yes it's strange that people think it's ok to blog at work but consider unethical to use facebook. P...
  • Kam Lagan wrote: Hi Matt, The numbers do seem a little "off" to what you perceived the community would be like. But...
  • Siderite wrote: You're kidding me! So the people that don't blog think it is ok to blog at work (maybe because they ...
  • Guy Harwood wrote: Good to see the results. one typo.... 'What best describes your current job title?' appears twice,...
  • sirrocco wrote: One problem with : DEV I DEV II DEV III was that I didn't know what it meant :( .(is it common ...
  • Jack wrote: How many person fill the survery? Blog is very common, so I don't think 71.5% is high. Maybe our bos...
  • Andy wrote: Done. The developer1, developer2 question - not sure how meaningful the results are going to be for ...