ASP.NET AJAX PageRequestManager beginRequest and endRequest Events for UpdateProgress
by David Hayden ( Florida C# Developer ), Filed: ASP.NET 3.5 Tutorials
Yesterday I mentioned how I was able to add a Progress Indicator on top of my GridView when doing Real-Time Filtering with the Web Client Software Factory and the Search Bundle:
ASP.NET AJAX Progress Indicator with Real-Time Search Functionality - YUI Style
Rather than using the ASP.NET AJAX UpdateProgress Control, however, I used a Panel Control and hooked into the PageRequestManager's beginRequest and endRequest Events which fire when an Asynchronous PostBack is sent to the web server. The beginRequest and endRequest events are great for notifying the user when a Asynchronous Postback is occuring, especially when the request may be slow.
One can hook into the PageRequestManager's beginRequest and endRequest Events using Javascript as follows:
with(Sys.WebForms.PageRequestManager.getInstance()) {
add_beginRequest(onBeginRequest);
add_endRequest(onEndRequest);
}
I then took the code for displaying the progress indicator almost verbatim as mentioned in the previous post:
function onBeginRequest(sender, args) {
// get the update progress div
var pnlPopup =
$get('<%= this.pnlPopup.ClientID %>');
// get the gridview element
var gridView =
$get('<%= this.CustomersGridView.ClientID %>');
if (gridView != null) {
// make it visible
pnlPopup.style.display = '';
// get the bounds of both the
// gridview and the progress div
var gridViewBounds =
Sys.UI.DomElement.getBounds(gridView);
var pnlPopupBounds =
Sys.UI.DomElement.getBounds(pnlPopup);
// center of gridview
var x = gridViewBounds.x
+ Math.round(gridViewBounds.width / 2)
- Math.round(pnlPopupBounds.width / 2);
var y = gridViewBounds.y
+Math.round(gridViewBounds.height / 2)
- Math.round(pnlPopupBounds.height / 2);
// set the progress element to this position
Sys.UI.DomElement.setLocation(pnlPopup, x, y);
}
}
function onEndRequest(sender, args) {
// get the update progress div
var pnlPopup = $get('<%= this.pnlPopup.ClientID %>');
// make it invisible
pnlPopup.style.display = 'none';
}
The production code is a bit different as I have to check for exceptions, etc., but this is the overall idea.
Since the only thing I am doing on the page is filtering the GridView, I can assume that all asynchronous postbacks are associated with the GridView. If this isn't the case on your form, you will have to determine what caused the asynchronous postback and whether it makes sense to display the progress indicator on the GridView.
You can do that in the onBeginRequest and onEndRequest Functions as follows:
var clientId = args.get_postBackElement().id;
where clientId will be the ClientId of the control that caused the postback. Knowing the ClientId will allow you to decide if the Progress Indicator should sit on top of the GridView.
Cool stuff.
ASP.NET AJAX Tutorials
Source: David Hayden ( Florida ASP.NET Developer ), Filed: ASP.NET 3.5 Tutorials