Matt Berseth

I had a number of people email me asking how the ProgressBar Toolkit control I blogged about last month could be used to provide progress for file uploads.  So I thought I would spend some time and see how this could be done.  Thankfully, there are a ton of resources available on the internet that discuss this in pretty good detail.  But I didn't see any good examples of how to include the real-time count of the number of bytes that have been transferred.  So I thought I would try to tackle that problem while building my example.   Update 7/27/2008: This post is bogus - I have over simplified the problem.  My goal was to display the number of bytes that have been transferred to the web server, not the number that have been saved to disk.  As atashbahar pointed out, this will require a little bit more work that...

Dave Ward had another great post this past week.  He took the time to not only read the ASP.NET Ajax Road Map document, but he also wrote up a post outlining what he thought about it.  So I thought I would join Dave's efforts and throw in my 2 cents as well.  Of course, most of this post will not make too much sense if you aren't familiar with the Road Map document.  So if that's you, here is what I recommend reading (in order) ... ASP.NET Ajax Road Map The feedback forum Dave's Post: The Future of ASP.NET AJAX (make sure you include the comments) Bertrand Le Roy's post (really only the comments are important)   My Comments ... My goal is to be direct without being rude, lets see if I can do it.    $query Any plans on providing an extensible selector engine?  If you have to...

So I figure what better way to learn more about jQuery than to dig right in and create a plugin or two?  At first I thought this sounded pretty intimidating, but after browsing through some of the existing jQuery plugins I figured it might be easy enough to try and 'rearrange' one of the Toolkit controls that I created.  So that is what I did with my GlowButtonExtender control I created a few months back (and I plan on doing it with the ProgressBar one as well very soon).  I kind of liked this because I thought creating the same UI widget using both the Toolkit and jQuery might give a little more insight into what the relative advantages are between the two frameworks. In case you didn't see my original post on creating the GlowButtonExtender control, here is how it works:  When you mouse over the button, it glows...

When creating my last post I tracked down all of the JavaScript files the ModalPopup Toolkit control loads.  I did this manually by using FireBug to see what script files were pushed out to the client and then I used Reflector to find out the size of the file (the Toolkit embeds the JavaScript files as resources).  That was tedious.  But I found the information pretty useful (I wouldn't have guessed the ModalPopup required the RoundedCorners script) and so I thought it might be useful to view this information for all of the Toolkit controls. So I cooked up a simple console application that rips through the Toolkit's assembly (I used version 1.0.20229.0) and tracks down all of the ClientScriptResources a particular control is using.  As I identified the scripts I ran then each through the minify -> gzip process so I could better gauge how large these scripts are...

And so I continue on messing around with jQuery and looking into ways I can use it in my WebForms applications.  Something I sheepishly admitted to in my last post was that I don't want to use 3 client side libraries {ASP.NET AJAX, AjaxControlToolkit, jQuery}, yet I never really took the time to see what the size of the core jQuery library is.  And for that matter I haven't really looked at what scripts some of my favorite AjaxControlToolkit controls are pulling down either.  I also assumed there is a bunch of overlap between jQuery and ASP.NET AJAX, but I haven't looked into that either.  So I thought I would check some of this out and along the way rebuild my Master-Detail with the GridView, DetailView and ModalPopup Controls and replace the ModalPopup with jQuery's ThickBox.  I found it pretty interesting - read on to see how it went.Live Demo...

If you have been following along with me over the past few days you have seen that I am looking into ways to incorporate some of the goodness of jQuery into ASP.NET AJAX.  Of course the obvious question is why don't I just switch over to jQuery completely?  Well ... The team I work on is not switching from WebForms to MVC any time soon. And I am fine with that - we have a bunch of good dev's all with plenty of years of WebForms experience so we understand all of the quirks and can get past any of the weirdness that sometimes pops up. But I don't really want to use 3 ajax libraries (jQuery, ASP.NET AJAX and the Toolkit). But I like how easy it is to author and distribute jQuery plugins and I wish there was a similar pattern for ASP.NET AJAX. I posted that bit...

I couldn't help but continue exploring the ASP.NET AJAX JavaScript component topic I wrote about yesterday.  So this afternoon I picked one of the simplest AjaxControlToolkit extender controls, the TextBoxWatermarkExtender, and rewrote it using the plugin approach I wrote about yesterday.  Again, I am very happy with how it turned out.  Read on for the details and don't forget to check out the live demo and download links as well. Live Demo | Download Step 1: Find an existing jQuery watermark plugin in that does what I want So I googled a bit and ended up following a link here.  This looked like exactly what I wanted so I downloaded the JavaScript and took a look at it.  And I was very happy to see that it was incredibly simple - only ~20 lines of code.  The script uses some selectors to identify the textbox elements on the page.  Once...

So I have been working with ASP.NET AJAX and the Toolkit for about a year and a half total - give or take a few months.  Over this period I have played around with building a handful of AJAX controls ... ProgressBar YUI Style Glow Buttons Scrolling Ticker Trace Console Anti-Aliased Rounded Corners GridView Hover Extensions ... and I am generally happy with how each one of these turned out.  However I have learned over time that a new control extender or script control is not always the right fit for the job. Take the problem Mustafa was solving the other day ... I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel. Mustafa...

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

I am still playing around with the ProgressBar control I blogged about a few weeks ago.  I recently updated it to include a handful of few new features and two new skins -below is a quick run down of what has changed.  I am pretty happy with how the control works in IE and Opera, but the Continuous mode animation is a little choppy in FF - I still need to get that figured out. Live Demo (IE6, IE7, FF, Opera) | Download   New Skins Like I mentioned in my earlier post - I wanted to make sure I could easily apply new skins to the progress control without rewriting the thing.  And I am pretty happy with how this has turned out so far.  I had 8 total skins in the original post and I have just created 2 more.  The first one is very similar to Vista's...

The second entry in my BugBash series ... The Bug I recently wrote a post discussing how to implement a master-detail editing scenario using ASP.NET's GridView and DetailsView along with the AjaxControlToolkit's ModalPopup control.  My example was pretty standard - each data row in the GridView has an Edit button that when clicked displays the selected row within a DetailsView.  My DetailsView uses RequiredFieldValidators for each of the input fields to make sure the user has provided the required information.  My sample seemed to work great - I certainly had no issues.  But, as Konstantin G posted in a comment - there is a bug hiding out in my example.  Here was what Konstantin G had to say:  Hi Matt, Great example! Everything works fine, but when you leave blank required field, and hit Cancel button, you can't display modal popup again. Any ideas how to solve this problem? Thanks....

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS. So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I...

A while back I wrote a post describing how the DetailsView, GridView, UpdatePanel and the AjaxControlToolkit's ModalPopup controls could be used to implement the common Master/Details UI pattern.  I cheated a bit when creating my original example in that I didn't really complete the implementation - the Save button on the popup didn't actually do anything.  Since writing that post I have received a lot of email and a number of people left comments asking me to complete the example - so here it is.  If you plan on reading through this article, I recommend playing around with the demo site to get a feel for how the page works.  All data changes are only persisted to memory, so don't worry about messing up the data set. Live Demo | Download Scenario I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case -...

I created a new theme for the AjaxControlToolkit's TabContainer  control and I was going to write a post discussing how I did it.  But as I was creating the post I realized that I have really written about all of the details before (see my TabContainer Archive page).  So instead of repeating myself, I decided I would instead put together a post that catalogs the Tab themes I have created so far and pull of them together into a single demo site that showcases each of these themes.  I plan on adding to the gallery as well as this post as new themes are added.  If I like how it works I might create similar pages for some of my favorite ListView and GridView themes as well.   Live Demo (IE6, IE7, FF and Opera) | Download   Google Analytics Theme Opera Theme LinkedIn Blue Theme LinkedIn Gray Theme Gray Theme...

Here are three quick tips you might find useful when using the Toolkit's Tab control.  I included demo's for all three tips so you can get a feel for how it looks and behaves. Live Demo (IE6, IE7, FF, Opera) | Download   #1: How To Change the Selected Tab When the Tab Header is MousedOver By default the tab control will switch the selected tab when a different tabs' header is clicked.  Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab.  I saw an example of this on designflavr.com.  This site has a tab control that displays the categories and tags and some other miscellaneous links.  These items are collected into a tab control that has been placed in the right hand sidebar.  You can get this mouseover style navigation by adding only...

Here are a couple more themes for the AjaxControlToolkit's Tab control based on the tabs found on LinkedIn.com.  Below the screen shots are a few bullet points discussing how I created them.  If tab theming is new for you - it might be helpful to check out these other samples as well ... Five AjaxControlToolkit Tab Themes created from DynamicDrive.com Dev.Opera.com Style TabContainer Theme JQuery TabContainer Theme with Tab Transition Animations Using CSS Image Sprites with the XP Themed TabContainer More Sample AjaxControlToolkit TabContainer Themes ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control As usual, here are the links for the demo and download ... Live Demo (IE6, IE7, FF, Opera 9.26)  | Download (.Net 3.5 and AJCT 3.5.11119.0) Tab Header Images Different images are used all three tab states: {Default, Hover, Active}.  Each tab is made up of 2 images, the left edge and the...

YUI recently added another button type to their control library - they call it the Glowing Button Control.  The Glowing Button Control allows you to add a glossy, glass like effect to your buttons along with a glowing background.  The YUI documentation says the inspiration for the design came from the Aqua buttons found in Mac OS X.  Below is a progression of screen shots that try to show the glowing effect, but you should really check out their demo page to get the full effect.       A project I am working on could use something like this to liven up a few of our screens.  We are prototyping a new design for our landing screen and of course we want it to be as sexy as possible.  The purpose of the landing screen is to let the user know about what our product is about and have them sign...

I found a few images on dynamicdrive.com and thought they would make a nice theme for the AjaxControlToolkit's Tab control.  Check out the live demo page to see if it is something you can use.  If it is - help yourself to the download. Live Demo (IE6, IE7 and FF) | Download If you haven't worked with theming the Tab control before, here are a few links ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control More Sample AjaxControlToolkit TabContainer Themes ... Using CSS Image Sprites with the XP Themed TabContainer JQuery TabContainer Theme with Tab Transition Animations Dev.Opera.com Style TabContainer Theme Below are the style rules I used for these tabs.  And here are the rules for the red tab.  The rules for all of the other colored tabs are exactly the same, only the background image url changes. That's it.  Enjoy!...

I was browsing ajaxrain's catalog yesterday and I cam across a pretty nifty jquery plugin called liScroll that allows you to turn an ordinary HTML UL/LI into a scrolling ticker.  Besides scrolling the items from right to left, the liScroll plugin supports two additional features It allows you to specify the scrolling speed by changing the value of the travelocity parameter The scrolling automatically pauses when you mouse over it After seeing the liScroll demo, I was certain that this was something I could use for some of the sites I am working on.  So I decided to see what it would take to implement a scrolling ticker control using the AJAX Control Toolkit.  In addition to the liScroll features listed above, I also wanted to incorporate a few other enhancements, including Support both left-to-right and right-to-left scrolling directions Support applying a CSS class to the item when it is...

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

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

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

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

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

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

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

While waiting for VS 2008 Web Developer to download, I took some time to browse through the Visual Studio Express site.  I am not usually a fan of sites that use a black background, but I thought it actually looked pretty good here.  The contrast between the white text and black background makes it hard to look at for too long, however in general the site gives off that sleek and cool vibe that I am certain the designers were shooting for.  One visual item in particular that caught my eye was the nice reflection effect all of the images on the page had.  Check it out in the screen shot below.    Live Demo | Download (IE6, IE7 and FF) I have briefly looked into this before so I was curious how this page had implemented it.  I opened up the IE Developer Toolbar and took a quick look.  For this page, the developers created a single image that contains both the image and the reflection.  You can...

I use Yahoo! for my email client.  The main screen has the standard email client three section layout.  One area for selecting a folder (Inbox, Drafts, Sent Items, etc...), another area that displays the messages in a table or grid, and the last region shows a preview of the selected message.  You can select messages to delete, forward, move by clicking a checkbox to select the messages, and then by clicking the button that corresponds to the action you want taken.      Live Demo (IE6, IE7 and FF) | Download (This includes the complete AjaxControlToolkit solution plus the code for my patch) I am currently building a new screen for a project I am working on and I would like to use a similar design.  I want to allow the user to use checkboxes to select rows.  Once one or more rows are selected, clicking a command button (Delete, Copy, Export) will execute the actions...

While doing some research this afternoon I ended up on dev.opera.com.  Its a nice looking site.  The combination of colors, fonts, and images make browsing the sites content enjoyable.  I was especially impressed with the tabbed menu that sits at the top of the page.  The tabs are rounded, have rollover states and are very professional looking.  So during some downtime this afternoon I created a new theme for the AjaxControlToolkit's TabContainer control using the same images and styles as dev.opera.com.  Because I have created a few themes before (jquery, yui and technorati), I was able to reuse the general structure of one of my previous stylesheet's and just plugged in my new images.   Live Demo (IE6, IE7 and FF) | Download (.Net 2.0 and Toolkit Version 1.0.10920.0)  Tab Header Images This tab theme uses images to form the rounded corners.  The original images on dev.opera.com didn't have transparent background, so I used Paint.NET to set the background transparency (if you haven't used...

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) JQuery Tab Theme Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just...

When I was in college I took a course on Software Construction.  With 3 weeks left in the semester, the professor assigned us a project that he knew would take close to 6 weeks to implement.  To meet the deadline he allowed us to leverage 3rd party components where possible.  He encouraged us to think about a solution that was constructed from other components as opposed to one that we developed from scratch.  This professor was good.  This is exactly the same type of problem I encounter everyday. Live Demo (IE6, IE7 and FF) | Download (Uses Toolkit Version 1.0.10920.0) I took this construction approach on a recent project.  Our team is looking to soften some of our UI elements by using the toolkit's RoundedCornerExtender control.  The toolkit's rounded corner implementation does not include anti-aliasing and as a result, the corners look pretty rough. (Anti-aliasing is a technique that is used to make graphics and text easier to read.  Here is...

The web application I am currently developing has a fair number of popup windows.  Some are modal, some aren't.  All open new browser windows and this annoys more than a few of our users (I hate popup's too, so I guess it shouldn't be that surprising).  So as a team we are looking into replacing our popup windows with the ModalPopupExtender and PopupExtender AjaxControlToolkit controls.  This is just fine by me - I have worked with the toolkit's popup controls on other projects and they worked quite well (It also saves me the pain of writing custom JavaScript for communicating between browser windows).  Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) So as an R&D task, I created a page that implements a simple 'Tip of the Day' popup control.  The functionality is basic - you click a button and the Tip of the Day panel is displayed.  Once displayed, you can click that 'Next Tip' button to fetch the...

Like I mentioned in my last post, I have been researching ways to make our web application a little more user friendly by including a handful of personalization features.  This research was oringally spawned from one of our more savvy users that was tired of always confirming deletes via our delete confirm dialog.  Our standard thus far has been to include this confirmation step at every place within the application where we allow the user to perform a delete.  For some users this confirmation step has become a little annoying.  So I nominated myself to look into what it would take to include the typical 'don't ask me this question again' checkbox to our confirmation dialogs. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)        Notes on the Demo: Use the 'Reset Profile' button if you want to see the confirm dialog again I removed the connection string from the download's web.config.  You will need to point to your existing...

On my work and home PC's I have my browser's homepage set to google.com.  Like the rest of the world, for about the past 7 years or so I have been using google as my starting point for Internet searches.  Sometime within the past year I took the time to setup google's personalized homepage - igoogle.  I configured my homepage with a nice blend of sporting and tech related gadgets.  I like this because it gives me a nice dashboard to the content that interests me most. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) One of the silly features I have found that I like about igoogle is how the pages color palette changes depending upon the time of day.  So as the day progresses from morning to afternoon to evening the colors on the page change as well.  Like I said, I know this is a silly feature, but I like it.  And I have asked...

I recently wrote a posting showing how GridView mouseover effects can be added to your existing GridView's through the use of a AjaxControlToolkit extender control.  In the last portion of the post I mentioned how I thought it would be useful to add other features into this extender to support column and header cell cell hover and select effects.  So on a recent road trip to Orlando FL I added a couple new features to this extender control and built a handful more grids to show off the new enhancements.  One of the new GridView themes uses the Sharepoint 2007 calendar color scheme and the other is derived from the ExtJs Data Grid.  All of the grids can be viewed on the demo site and of course you can also download the full source.   Live Demo (IE6, IE7 and FF) | Download The GridViewControlExtender now includes support for applying column hover and select CSS classes to cells that are in the same column...

In a recent post, I created a GridView that with the help of some JavaScript and CSS rendered similar to the Tablecloth style table shown here.  I like the Tablecloth sample because the presentation of the grid changes as the user interacts it.  It does a good job of keeping the user focused on the data elements the they are currently working with.            Live Demo (IE6, IE7, FF) | Download   The design of the Tablecloth grid is fairly simple.  It boils down to adding and removing CSS classes to the individual HTML Table elements (mostly TD's and TH's) in response to a four different DOM events (mouseover, mouseup, mousedown and click).  For example, when the mouse cursor is positioned over a particular cell in the table, the mouseover event fires and a bit of JavaScript runs and applies a CSS class to all of the cells that share the same rowIndex or cellIndex.  The image below shows how this works.  When the mouse is positioned over...

The calendar control that my team is using in our current web application is terrible for three reasons: it is ugly.  Viewing the control reminds me of the first time I went back to Window's 95 after having upgraded to XP it opens the calendar control in a new browser instance (something our users hate) it has a lot of supporting, custom JavaScript that has had its fair share of bugs If I am not mistaken, somehow the control survived the port from classic ASP to ASP.NET 1.1 and then again from ASP.NET 1.1 to ASP.NET 2.0.  I have no idea where the control orignally came from, but it is time to get rid of it. Live Demo (IE6, IE7, FF) | Download So my latest research tasks was to look into replacing this legacy control with something a little hipper.  I took a look at the AjaxControlToolkit's Calendar control to see if it was something we could use.  Sure enough...

If you follow my blog, you have no doubt noticed that I have been taking a tour through the Yahoo! User Interface Library (you can read my previous posts here, here and here).  Well, I think I have finally made my way through a majority of the content and feel like I have come out with a few new UI components that I can incorporate into my current web app.  But before I move on, I thought I would write one last brief post describing how you can incorporate the YUI style progress panel into your existing ASP.NET AJAX web application. Live Demo (FF, IE6 and IE7) | Download The markup for the progress panel is below.  <asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;"> <div class="container"> <div class="header">Loading, please wait...</div> <div class="body"> <img src="img/activity.gif" /> </div> </div> </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode...

If you have read a few of my most recent posts (here and here) you have probably noticed that I have been spending some time with  Yahoo!'s YUI control library.  During my most recent visit I came across a great looking confirm dialog.  It's simple and straight to the point ... Live Demo (FF, IE6, IE7) | Download The team I currently work on had already been debating whether or not we needed to replace our existing standard confirm dialog with something a little better looking.  Watching the demo pretty much sealed it.  So I signed up for investigating what markup and style classes were needed to get this dialog into our application and working with the AjaxControlToolkit's ModalPopupExtender control.  The following are the steps I did to accomplish this ... Design the HTML Structure and CSS Classes Our existing confirm dialog is not CSS friendly.  That made tweaking the look and feel a little harder than it should have been.  So this time around, I...

I recently stumbled across the following post.  In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application.  While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner: I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup.  I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right  (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something.  The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.  Live Demo | Download [Update 10/3/2007]: As Koen points out, the...

I recently blogged about how to create a YUI TabView theme for the AjaxControlToolkit's TabContainer control.  As a follow up to this entry, Peter Kassenaar asked the question: I just don't quite get how the CSS is able to extract the different (background) images from a single sprite.png file. I've googled for this, but that didn't help me much. Can you point us to a direction where this is further explained? This would give me the perfect opportunity to clean up my /images folder on the various themes of a project... In the YUI theme I created, I used a single sprite image and used CSS to pinpoint the location within the sprite for the background image of the tab panel header's.  Peter is asking how I did this.  To be honest, I just reverse engineered the CSS style attributes from Yahoo!'s demo site along with the exact same sprite image...

After working on a YUI TabView theme for the AjaxControlToolkit's TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web.  I was especially curious in seeing what it would take to include images in each of the tab panel header's.        Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme.  If you are not familiar with how theming the TabContainer works, I recommend reading the documentation for the TabContainer control.  Download | Live Demo | View Stylesheet   Technorati Tab Theme I like Technorati's tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme.  Here is a link to the page where I found this control. Notes: To use this theme, include a link to...

I was browsing the YUI documentation and I came across a very nice looking tab control.  I thought it would be interesting to create a similar styled theme for the AjaxControlToolkit's TabContainer control.  I don't mind the default XP-themed TabContainer, but I think the XP style tab's are getting a little bit dated.  I had not previously created a theme for a TabContainer, so I had no idea what to expect.  It turns out it was very easy to do.  Below are the steps I followed ... Live Demo | Download Code [Update 10/1/2007] : Updated CSS so it would work with IE6 Check out here for additional TabContainer theme Check out here for an XP without the roll-over flicker   Read the 'Tab Theming' Section of the TabContainer's Documentation Because I haven't created a custom theme for this control yet, I needed to do a little research before getting started.  I read through the paragraph on the toolkit's sample site that explains how...

I recently stumbled upon this site again.  I remember on my first visit, I thought it was pretty cool how the modal popup's incorporate subtle animation effects that give the pages a little extra pop.  If you go to the site you can check it out for yourself.  Try clicking on any of the 3 images on the page and watch closely for the animation.  [Update: 9/20/2007] I followed up with Ted Glaza on his comment and he provided some additional information.  I included the email thread at the bottom of this post. Live Demo | Download This page appears to be using PHP, but I thought it might be interesting to re-engineer the modal popup using ASP.NET AJAX plus the ModalPopupExtender control from the AjaxControlToolkit.  I figured there should be some way to run an AjaxControlToolkit Animation when the dialog is displayed ... It turned out this was a little more difficult that I...

I was recently reading Dan Wahlin's excellent 'How To' for creating a GridView extender control.  While I was going through his code samples, I thought it might be interesting to create another GridView extender that allows you to resize the column widths of the GridView by clicking and dragging the header cell borders.  Before I went down the path of actually implementing the extender control, I wanted to get a feel for what the client side code for handling this might look like.  So I quick created a sample application where I added this functionality to the Google Analytics GridView I blogged about in an earlier post. ** Because this sample is a proof of concept, I only tested in IE7.  If I move the code to an extender control I will go back and test it with other browsers.  Live Demo | Download Before I get into the implementation details, here is a quick screen shot of the grid. ...

If you have been working with Microsoft's ASP.NET AJAX components, you are probably very familiar with the $get and $find JavaScript shortcut functions.  If not, here is a quick refresher. $get Overview $get can be used as shorthand for the document.getElementById and element.getElementById functions.  The $get shortcut function points to the Sys.UI.DomElement.getElementById JavaScript function which is defined as part of the ASP.NET AJAX client side library (which means you will need to include a ScriptManager on the page to be able to use it).  $get accepts two parameters, the first is the ID of the DOM element you want to retrieve, the second is the parent element of where the search starts.  The second parameter is optional and when it is not supplied defaults to the document element.  Here is the official API reference. If you happen to step into $get during a debugging session you will find that it basically comes down to the following function ... function get(id, element) { // validation code...

The web application I am currently developing has a handful of cases where modal windows are used to gather user input.  Lately, I have been considering replacing these modal windows with an asp:Panel that is displayed as a modal popup using the AjaxControlToolkit's ModalPopupExtender control.  In the process I noticed a small usability issue with the ModalPopupExtender's behavior.  Unlike other modal windows, the popup is not dismissed when the user presses the 'Esc' key.  I am one of those users that relies heavily on the keyboard and only uses the mouse as a last resort - so I find this rather annoying. Live Demo | Download Hopefully, this functionality will make it into the toolkit one day.  Until then, you can add it to your pages by including a small amount of JavaScript.  In the sample page I created for this demo, I attached a handler to the document's onkeydown event.  In the handler I check to see if the key pressed was the 'esc' key, if so I find the ModalPopup component...

As mentioned in my previous post, I am currently researching different ways my current projects web application can better leverage the Virtual Earth Map Control. Currently, we have a single page buried deep in our sitemap that users can use to view an aerial photo of a particular property.  Users love the mapping feature and have requested that it be made available on more of our screens.  Our applications most heavily used screen allows users to search for real estate that is currently for sale.  The page is setup as a standard search page with a handful of input elements at the top of the page that the user enters parameters into.  When they click search, we run fetch the records that meet their criteria and populate a GridView with the results.  We thought it might be interesting if we could display the Virtual Earth Map as a popup right on this search screen.  To see what this would take I created a sample page that displays the names, address and geo information from...

I love the AjaxControlToolkit.  The controls are free, the code can be downloaded, and the documentation is well above average.  However, I was a little surprised when I looked at the code and supporting documentation for the HoverMenuExtender's sample page.  The documentation states the following In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row. The sample page does contain a GridView, but it doesn't look too much like the GridViews I have created or seen in the web applications I have worked with.  The main differences are the following The sample GridView doesn't support Sorting  The markup for the GridView doesn't use BoundFields, but instead has a single TemplateField that has an embedded table for both the ItemTemplate and EditItemTemplate The first item are show stoppers for me because the DataSources I...

My current employer uses a web based tool for project management.  The tool is visually appealing and provides users with a great web experience.  It's an ASP.NET application that relies heavily on ASP.NET AJAX.  One of the AJAX features I like is the use of a popup control for status/type selection (i.e. what state is this bug {Open, Closed, Pending Acceptance, ...}).  Most existing web and windows applications usually present this as a drop down list.  Live Demo | Download Obviously, there is nothing wrong with the drop down approach, but I thought I would create an example showing an alternative technique using the PopupControlExtender found in the AjaxControlToolkit along with the regular ASP.NET RadioButtonList control.  The main advantage the PopupControl/RadioButtonList approach has over the standard ASP.NET DropDownList is that it provides the developer with a finer grained control over the presentation.  Here are a couple of screen shots that show this alternative technique.  Because the RadioButtonList control exposes attributes for controlling the layout, it is easy to configure exactly how...

Did you know that the when a partial postback starts, the OnUpdating animation for all of the UpdatePanelAnimationExtender's on the page will play.  Here is part of the documentation taken from the UpdatePanelAnimationExtender page It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes). Unless I am mistaken, I believe this behavior is for the scenario where an UpdatePanel's UpdateMode is set to Conditional, and the code on the server handling the partial postback explicitly calls Update on the UpdatePanel.  In this case, where logic on the server decides if an UpdatePanel is refreshed, the UpdatePanelAnimationExtender has no way of knowing if it should have played the...

I recently wrote a post showing how the contents of an UpdatePanel can be disabled using a technique similar to what the ModalPopupExtender control does.  The ModalPopup control adds a div onto the page that covers the all other elements by setting the width and height to the windows width and height and then sets the div's z-order to a very high number (like 1,000) ensuring that is it the top most element.  This div covers all of the other elements on the screen which provides the modal behavior. I received two comments from this post It doesn't work with FireFox  It would be nice if this was an ASP.NET AJAX extender control I have not created an AjaxControlToolkit extender control before so I figured this would be a good opportunity to learn something new.  Because I had already developed the code for the previous entry, I figured it would come down to copying and pasting the code into the appropriate methods of the AjaxControlToolkit framework.  Sure...

I am currently working on a data-centric web application.  The page I most recently worked on allows the user to browse data from six different tables (a primary table, and five other tables that have 1-M relationships to the rows in the primary table).  A row from the primary table is displayed in a DetailsView.  Below the DetailsView is a TabContainer control with five tabs; each tab contains a GridView that displays the related rows in the other five tables.  Below is a screen shot of what the TabContainer portion of the page looks like.  Live Demo | Download Sample Site When I first developed the page, I bound the DetailsView and each of the GridViews to the corresponding DataSources like I usually do.  Everything worked great in our development environment.  The grids filled nicely and I could move around from tab to tab with no problems.  However, when we moved the page into our production environment loading the page was terribly slow.  In production, we have n-times more data and...

I recently read a dotnetkicks article where the author laid out an approach for using the ASP.NET AJAX client-side framework to synchronously execute a WebMethod that does some sort of server-side validation or computation.  I believe the idea here was while this validation is executing the page designer does not want the end user interacting with the other elements on the page.  I had not encountered this issue before, but I started working out how I would have approached it.  I enjoyed the authors article and I liked how he leveraged the existing ASP.NET AJAX framework and that the solution should would work with the existing ASP.NET CustomValidator.  Because the operation is synchronous, you can invoke the WebMethod from the ClientValidationFunction and set the IsValid bit to true or false depending upon the result.  However, I am not sure if I would like having the page go unresponsive while this validation is taking place.  Especially if it is unclear to me that the field I entered data into was going to require...

I recently created a folder explorer using a combination of the ASP.NET TreeView and GridView controls as well as the new ASP.NET AJAX UpdatePanel.  You can view a live demo of the folder explorer here. The code for this sample is at the bottom of the page. [Update 7/24/2007]: Here is another post regarding this, except with a few more enhancements [Update 7/17/2007]: Per Ruckus' comments, I would like to make the following clarifications: The sample provides read-only access to the folders and files, making it more of a 'Folder Browser' instead of an Explorer A full-postback is done when a folder is clicked in the right hand pane.  If you have a suggestion to a nice way to have the Folder image buttons cause async-postbacks instead of complete post-backs, let me know.  I thought about possibly handling the RowDataBound event and explicitly calling RegisterAsyncPostBackControl ... Offically the TreeView control is not supposed to...

I was looking for good examples of how the ModalPopupExtender control could be used as a confirmation dialog.  I was especially curious in seeing implementations where the popup is used to confirm deletes performed on rows of a GridView.  I couldn't find any good samples so I figured I would take a shot at it.  Live Demo If you would like to view a running version of the sample, just follow the Live Demo link.  If don't really care about the step by step break down of this implementation you can jump to the bottom of the page to view the full code sample.  As always, feedback is encouraged.      Step 1: Add the GridView to your page, placing it inside an UpdatePanel.  <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" /> <asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%"> <AlternatingRowStyle BackColor="aliceBlue" /> <HeaderStyle HorizontalAlign="Left" /> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Item" HeaderText="Description" />...

The web application I am currently working on is a data-centric, internal facing application targeted at the knowledge workers within our enterprise.  A majority of the pages are our core 'search' pages that contain a GridView and a number of input elements for entering search criteria.  Each row in our GridViews contain a hyperlink to a supporting 'details' page that has additional information for the selected row - usually contained in a DetailsView.  Our standard for implementing this has been to render the values for the GridViews primary key column as a hyperlink that takes the user to the details page passing the PK through the query string.  This all works fine and our users seem to be OK with this type of naviagation.  But when I was recently doing some work with the ModalPopupExtender, I was curious if we could improve this flow by keeping the user on the main search page by moving the DetailsView to the ModalPopupExtender.  See the screen...

Yesterday I was fiddling around with my MovableType blog looking for a plug-in for MovableType 3.2 that could render my category tags as a tag cloud  (by the way, I am still looking).  Along the way I came across the following site that had a nifty way of displaying screenshots of their product by clicking on the corresponding thumbnails.  Instead of having the browser take you to a page with the full image displayed by itself, the site displayed the image on top of the page in an ajax modal style window.  Besides just the image, the modal window also contained a few buttons as well as some additional information that was specific to the image.  Very nice.  I was curious of what this would take to implement using ASP.NET AJAX, so I created a sample web site (screen shot is above-right) that allows uses to browse thumbnail images.  When a thumbnail is clicked, the modal window is displayed showing the user the...

Lately I have been playing around with AJAX progress indicators (gmal-like progress indicator, apply an UpdatePanel to an asp.net Wizard, and animated GridViews).  I saw this one (see screen shot below) on one of the Google Analyitics pages.  I liked it - so I figured I would write up a quick sample using it.  I am not going to go into detail regarding the specifics of the implementation, but the complete source for the page is listed below (it requires the AjaxControlToolkit).  Also, here is the animated gif  and here is the link to the tool that I used to create it.  Enjoy! [Update: 7/31/2007] I have included a link to download this sample website.  The site contains 2 pages both displaying the same demo.  The first page (Default.aspx) uses C# for the codebehind and the second one (Default2.aspx) uses VB. View Live Demo | Download Code Complete source for this example:<%@ Page Language="C#" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

Like most people, I use more than a few of Google's web applications on a day to day basis.  I think what I like best about their applications is the elegance of the user interface.  Just recently I started using their analytics web application to learn more about what drives visitors to my site.  One of the pages within the tool is a dashboard screen that displays a handful of different panels, each containing summary information pertaining to the web traffic for my site.  Some of the panels display charts and graphs, while others contain tables with aggregated data.    As you can see, there is a lot of information being displayed on this page.  And as far as the user experience is concerned, this page is great.  It delay loads each of the panels instead of waiting until all of the data for all of the panels has been processed before serving the page.  As a result, the page loads almost immediately and the panels come to life one at a...

Lately I have been working quite a bit with the UpdatePanelAnimationExtender control.  I have been using this control along with the animation framework to spice up my ASP.NET GridViews, DetailViews and Wizards by running a simple animation script before and after the control has been updated via an async postback (typically the animation disabled a button, faded out the control, and/or popped up a progress indicator) .  This has worked great for the past few months, but recently a new requirement came in from the field requesting for a way to cancel an async operation.  Being aware of the abortPostBack method the PageRequestManager, I figured (more like hoped) it would be pretty simple to implement this feature.  I added a 'Cancel' button to my progress indicator and wired the onclick handler to invoke the abortPostBack method.   Live Demo | View Source  Clicking cancel did abort the async postback however, because the OnUpdated animation only runs when the UpdatePanel is updated my indicator was never being hidden and it was appearing as if...

I came across a blog post discussing a slick way to use the ASP.NET AJAX UpdateProgress control to add a gmail-like progress indicator to an ASP.NET web page.       I liked the approach the author used and it clearly works great for scenarios where you want to display a single 'something is happening' message to the user while the page is being updated.  However, after the operation completes and the indicator disappears, it is still up to the user to figure out where on the screen (i.e. what control was updated?) to look for the new changes.  If your screens are relatively simple, or if you feel the update should be obvious this is probably not an issue for you.  Unfortunately things aren't so for the web application I am currently working on.  A few of the screens contain a number of different sections and users would like to see the indicator rendered over the control (most commonly a GridView...

In a recent post I outlined an technique that I have been using to center an animated gif over an asp:GridView while it is being refreshed via the asp:UpdatePanel.  I like this approach because it provides the user with 2 visual cues (the control fades in/out and the animated gif displays a progress bar) letting the user know the panel is in the process of being refreshed.  In this sample, I use a similar approach and apply it to the asp:Wizard control. Download code | View live demo Here is the outline of the technique: Wrap the asp:Wizard within an asp:UpdatePanel (requires the Ajax.Net) Add an HTML div tag to the page containing the animated gif that will be rendered over the asp:Wizard while the panel is refreshing Set the display style to 'none' so the image is initially hidden<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px"> <img src="simple.gif" /> </div> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier,...

 I recently was working on an Asp.Net project that contained quite a few search pages.  These pages all followed a similar structured pattern where the user had a set of fields they could filter on by typing in values and pressing the search button.  The results were displayed in a GridView where the user could sort by clicking on column headers, export the results to excel, etc...  To help improve user experience, we placed each of the GridViews in an asp UpdatePanel so while the user refined the search (sorting, adding or removing additional filters), only the GridView would be refreshed and not the entire page.  Additionally, we wanted to add a few standard UI cues (disabling the Search button, fading out the GridView, and placing a progress indicator over the GridView) letting the user know an operation was currently in progress. Download Code | View live demo It turned out that adding these UI cues was pretty easy...

I recently used the AJAX.NET framework in a project and I was impressed with how easy it was to implement and how much it improved the usability of our pages.  Our project had quite a few advanced search pages where users can enter in a number of different filters and then hit the search button (usually iteratively - filter/search; filter/search; etc...).  Before the Ajax framework and Ajax Control Toolkit were applied to the pages, each time the user would tweak a filter or request a different column sort, the complete page would refresh.  After adding Ajax to the pages, just the GridView is re-rendered giving the user the much nicer web 2.0 user experience.  Anyway, here are the steps I followed for adding these features to our project ... Download code | View live demo Step 1: Download and install the official ASP.NET Ajax Framework Microsoft released the RTM version of the Ajax framework (previously named Atlas) for .Net 2.0...