:::: MENU ::::

Sunday, June 29, 2008

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 or DetailsView) that is being updated.

To achieve this, I am using the UpdatePanelAnimationExtender control that is part of the AjaxControlToolkit (You can follow directions here to install and get started using the toolkit).  This control allows for defining the visual effects you want run before (the OnUpdating animation) and after (the OnUpdated animation) the contents within the UpdatePanel have been refreshed.  For the gmail progress indicator, the OnUpdaing animation runs a piece of JavaScript that calculates the bounds of the GridView that is contained within the UpdatePanel and renders an HTML DIV in the upper right hand corner of the GridView control.  After the update occurs, the OnUpdated fires and runs another piece of JavaScript that hides the DIV.        

You can view a live demo here and download the sample web application with all of the code included here.  There is no code-behind for the page, so if you are intereseted in quickly viewing the markup and JavaScript for the page - it is posted below (you will have to change the connection string to point to your copy of the Northwind database ...) 

More

Categories: