Custom progress indicator for UpdatePanel

In ASP.NET the UpdatePanel can help you create an AJAX experience very fast and easy. It is typical to provide some visual element in the page that indicates that the AJAX request is been processed. This can be an animated image, a simple text message, a pretty modal box with a nice shadow effect – anything that does the trick and tells the user that the page is not broken but it’s busy.

The UpdateProgress control in ASP.NET can handle showing a simple message, but for something more sophisticated, you’ll have to do it yourself.

In this example, we’ll use an animated loading image to indicate progress when a user sorts a GridView. The animated loading image will appear within the table header that the user clicked on in order to sort. This way the user will definitely see the image, since it appears exactly where he clicked. We’re aiming at something like the next screenshot:

ajax progress in cell

First we attach a javascript handler that will be called when an AJAX request is initiated:

function onInit(sender, args) { }

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(onInit);

We need to see if the postback is caused by an element within a table header. If that’s the case, we append the HTML markup that renders the loading image to the inner HTML of the table header:

function onInit(sender, args) {
  var element = args.get_postBackElement();
  if (element && element.parentNode && element.parentNode.tagName == "TH") {
    element.parentNode.innerHTML = element.parentNode.innerHTML +
      ' <img src="img/progress.gif" alt="Loading..." />';
  }
}

This is enough, but we can do a bit better. With this code, if you click very fast on the table header, you’ll end up with more loading images shown. What we can do to fix this is to cancel the new request if an existing one is still been processed.

function onInit(sender, args) {
  var status = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
  if (status) {
    args.set_cancel(true);
  } else {
    var element = args.get_postBackElement();
    if (element && element.parentNode && element.parentNode.tagName == "TH") {
      element.parentNode.innerHTML = element.parentNode.innerHTML +
        ' <img src="img/progress.gif" alt="Loading..." />';
    }
  }
}

That’s it! If you add this script to your page, all GridViews (or any other table for that matter) inside UpdatePanels will show the animated loading image within the table header when the user sorts the table.

Hope this helps.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s