October 15, 2007

YUI Style AJAX Progress Indicator

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

 

August 06, 2007

UpdatePanelAnimationExtender - OnUpdating Will Always Play

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

 

July 05, 2007

Google Analytics like AJAX Progress Indicator

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

 

July 04, 2007

Delay Load an UpdatePanel

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

 

June 29, 2007

ASP.NET AJAX: Canceling an async postback

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

 

June 24, 2007

ASP.NET AJAX: Rendering a Gmail-like 'Loading' Indicator over a Specific ASP.NET Control

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

 

June 03, 2007

Quick Ajax Tip: Provide a better asp:Wizard user experience

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

 

May 21, 2007

Ajax.Net Example: Using an UpdatePanelAnimationExtender to place an animated gif over a GridView

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

 

May 01, 2007

7 simple steps to ajax-enable your ASP GridView

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

 


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.

Popular

Sponsor

Topics

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

Archives