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

IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness

A while back I wrote a post about adding animation effects to the AjaxControlToolkit's Tab control.  The demo I created for the post used the toolkit's FadeIn animation to fade the selected tab into view as it became active.  I thought this turned out pretty well, however I noticed that after the fade animation finished running the tab's text contents remained a little blurry.  Compare the before and after.   To see this for yourself, open the demo page and click on the 'Play Fade Animation' button at the top of the screen.  Notice how the text looks a little blurry after the animation runs?   Ted Glaza responded to that original post and provided a hint as to what might be causing the problem The problem you're seeing with the FadeIn animation has to do with how IE and ClearType work together. Searching "IE ClearType Opacity" should provide more details....

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

Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control

I was browsing through the YUI developer site and came across another component that I thought would make a nice addition to my ever growing toolbox.  It's their Logger Control.  The YUI guys have created a floating debug console window that displays messages as they are written to the YUI log object.  You can check it out for yourself on their demo page.  Besides just displaying the messages, the Logger Control also supports a few of the other standard log browsing features, including Viewing messages by severity (info, warning, or error) Viewing messages by source (global or LogReader in their sample) Pausing and clearing the trace Collapsing the trace console window Repositioning the trace console window by 'drag and drop' Live Demo (IE6, IE7 and FF) | Download (ASP.NET 2.0 and Toolkit Version 1.0.10920.0) I think this Logger Control could be quite useful.  ASP.NET AJAX has a similar concept, however...

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