June 10, 2008

Creating a Simple Dashboard using the TabContainer and ListView Controls

As a user, I am a fan of dashboard pages.  Many data centric web applications have these as landing pages (I know the one I am currently building does).  These pages usually display a high-level summary of the data the application is managing for the user.  A few weeks ago when I was playing around with some Google Analytic style skins I tried combining the AjaxControlToolkit's TabContainer control with a simple ListView rendered data table to see if I could mimic some of the dashboard controls that google uses.  I thought it turned out pretty well so I figured I would write a quick post ... For my example app I created a Sales Dashboard control that displays sales figures for all of the sales people in some fictional company.  The dashboard has three different tabs, each provides a different view of the same data.  For my example, the only...

June 05, 2008

4 New Grouping Grid Skins: Vista, Bold, Win2k3 and Soft

Nearly 6 months ago a wrote a post showing how you can use ASP.NET 3.5's new ListView and LinqDataSource controls to create a pretty sweet looking grouping grid.  Well I recently created a few additional skins for my original grid that I thought I would share.  You can follow the link to the demo site to see them in action and if you are interested in learning more you should read my original post and then download the sample site and step through some of the code. All of the themes use exactly the same markup.  All images (including expand/collapse icons, sorting icon and pager icons) are controlled via CSS.  My original post used ImageButtons, but I replaced these with LinkButtons.  This seems to be working out pretty well - I can use the CommandName and CommandArgumnet properties to hook into some the ListView and DataPager's advanced features, but I...

May 21, 2008

Modifying Data with the ListView's EditItemTemplate

I am lovin' the total control the ListView control is giving me.  This past week a link to Telerik's new RadGrid control was floating around the office - and the general consensus was that the in-line editing capabilities control was pretty cool.  And I completely agree - the in-line edit feature is pretty useful.  But ... you don't need to buy the RadGrid to create a grid like this.  ASP.NET 3.5's ListView control provides excellent out of the box support for scenarios like this. Check out the screen shot below (or even better, open up my live demo).  This grid provides the same in-line editing support as the RadGrid, it is incredibly flexible if you want to tweak the layout, and best of all there is absolutely zero codebehind logic!  Did I mention I am lovin' the new ListView? Below are some of the implementation details - read on if...

Topics: ASP.NET , ListView

May 04, 2008

Bulk Inserting Data with the ListView Control

I am working on a project that needs a new screen for bulk entry tasks.  We have a few business scenarios coming up where we have people inputting 5 to 8 records of data at a time.  I met with a few of our analysts last week and hashed out a rough outline of what they were looking for.  About 10 times or so during the 30 minute meeting some form of the phrase 'kind of like excel' was mentioned.  Our data entry personnel are familiar with excel and our analysts thought an excel styled grid would make a lot of sense.  'An excel grid with a Submit button' was the phrase I had underlined twice in my notes.  I wasn't too worried about the grid's styling, but I wasn't quite sure what the best way to handle the 'bulk insert' requirement.  Most of our other grids require an explicit...

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

March 08, 2008

Building a Vista Style Folder Browser with ASP.NET 3.5 and a Custom Hierarchical DataSource Control

A while back, I wrote a post describing how to create a folder browser with ASP.NET 2.0 using the TreeView, UpdatePanel, GridView (customized to always display header row) and a modified version of the FileSystemDataSource as described on MSDN.  I have used this widget on a few different projects and I generally like how it works (you can view the demo here).  One thing my original implementation is clearly lacking is a professional look and feel.  So I recently had the opportunity to upgrade it to .Net 3.5 and in the process I decided it was time to overhaul the style.  Using the Vista folder explorer as my template, I made the following changes to the original sample ... Replaced the plus/minus icons with dark and light arrows Added soft blue rounded corners to the explorers container Added modified date column to the right hand pane Added a footer the...

March 02, 2008

Tag Cloud Filters with ASP.NET 3.5's LinqDataSource and ListView Controls

This past week I finally set aside some time to take a look at Silverlight.  I started with ScottGu's digg demo application and continued on to silverlight.net to check out what some of the early adopters have already built.  I didn't get too far before I bumped into a control on the Silverlight showcase homepage that thought was pretty interesting.  The control is a datagrid of sorts that allows you to filter the contents of the grid using a tag cloud.  So I took a crack at creating a similar looking grid using ASP.NET 3.5 (the screen shot is below). Notes: The icon images used in this sample are transparent PNG's, so the demo page looks a little goofy in IE6. Live Demo (IE7, FF and Opera 9.26) | Download (.Net 3.5) Update (3/4/2008):  Mark Grubner posted the following comment: A question about this one though - could you comment...

February 25, 2008

Building a LinkedIn Style Address Book with the ListView and LinqDataSource Controls

LinkedIn has a nice looking address book widget that displays all of your connections partitioned by last name.  To the left of the contact listing is an index that allows you to jump right to a section.  This control isn't overly fancy, but I was curious what HTML/CSS/JavaScript was used to create it.  So I took it apart using the IE Developer Toolbar and rebuilt it using ASP.NET 3.5 - making use primarily of LINQ to XML, the LinqDataSource and a couple of ListView's.  Feel free to browse the source code by following the download link.  And, of course I recommend checking out the live demo as well.  If you are interested in how I created the sample, a quick description of the implementation details can be found just below the screen shot.  And the best part - excluding the CSS, only 115 lines of markup/code are required to build...

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

January 10, 2008

Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls

I haven't played too much with ASP.NET 3.5's new LinqDataSource control yet - so I figured it was about time I did a little research and checked it out.  Typically, I like to document my research by creating a small prototype application focused on a handful of the new features that I am investigating.  I find building a reference application is helpful because it tends to drive out some of those nasty implementation details that somehow remain hidden if I just browse the documentation or read a reference book.  So for a recent research project, I decided I would look into the LinqDataSource's control GroupBy and OrderGroupBy attributes to see if they could be used to help me build a grid that supports grouping.  Below is the final screen shot for my reference application.  The grid shows the rows in the Northwind Orders table - grouped by the customer that...

December 28, 2007

Creating a Google Suggest Style Filter with the AutoComplete Control

I spent some time playing around with the AutoComplete control to see if we could use it to provide smarter filtering capabilities for our data tables.  The general idea was that I would allow the user to select a filter column from a drop down list.  Then as they key in characters into the adjacent textbox I would use the AjaxControlToolkit's AutoComplete extender to suggest some values to filter by.  You can see this in the screen shot below.  I selected 'City' in the drop down and then typed 'be' into the textbox and like magic the 3 cities in my data set that have start with 'be' appear.  Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit 3.5.11119.0) If you are interested in how I created this sample, the details are below. The AjaxControlToolkit's AutoCompleteExtender If are familiar with Google Suggest, the concept behind the AutoComplete control...

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 16, 2007

Creating an Outlook Navigation Bar using the ListView and Accordion Controls

One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client.  The page is divided vertically into 2 panes.  The left pane contains a 2 level hierarchy of categories and subcategories.  As the user selects different subcategories the designer wants the right pane's content to be updated with the corresponding information.  Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels. I am familiar enough with the AjaxControlToolkit's Accordion control to know that it should be the right tool for the job here, but I haven't actually used it before.  So I did a little research on the Accordion and created a small demo page that we used to get a feel for how the control behaves and what it takes to build and style it. 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...

November 25, 2007

YUI DataTable Styled ListView

Now that .Net 3.5 and VS 2008 have shipped, I thought it would be a good time to take a look at the new ListView control.  I use the GridView quite frequently, and I am curious what the tradeoffs I would encounter if I used the new ListView control for rendering our tabular datasets.  I figured a good way to learn would be to create a ListView that generates one of my favorite looking HTML tables. So I re-implemented my existing YUI DataTable Styled GridView using the ListView.  My main goal for this task is just to get a better feeling for how the ListView control works.  Unfortunately my asp.net hosting service won't support .Net 3.5 until sometime next week so until then there isn't a demo.  But you can download the code for this sample. Live Demo | Download ListView Overview If you aren't familiar with the ListView control, here is a quick overview from MSDN.  I...

Topics: ASP.NET , ListView


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