HOWTO:Hide a WebGrid and display an image during an AJAX req


Summary

When a WebGrid triggers an AJAX request, there is a delay until the request completes and is displayed on the client. In some cases, the programmer will want to hide or otherwise disable input on the WebGrid until this processing finishes. This article shows how to display an image or other “Loading” message while these requests process.

Additional Information

You can use the WebGrid’s BeforeXmlHttpRequest and AfterXmlHttpResponse client-side events to hide the grid and display a loading message.

Note that these events are only raised when an AJAX request is created by the WebGrid itself, not when processing custom AJAX requests.

This approach only works in NetAdvantage 2006 Volume 1 and later. In previous versions, the WebGrid is non-responsive during the BeforeXmlHttpRequest event.

Step-By-Step Example

The following functions hide the WebGrid and display an image when an AJAX request from the WebGrid starts, and hides the image and displays the WebGrid when the AJAX response finishes processing. In this example, both “grd” and “loadinggif” are the IDs of DIV elements which respectively contain the WebGrid and the loading image.

In JavaScript:

function grid_BeforeXmlHttpRequest(gridName,type)
{
document.getElementById(“grd”).style.visibility = ‘hidden’;
document.getElementById(“loadinggif”).style.visibility = ‘visible’;
}

function UltraWebGrid1_AfterXmlHttpResponseProcessed(gridName)
{
document.getElementById(“grd”).style.visibility = ‘visible’;
document.getElementById(“loadinggif”).style.visibility = ‘hidden’;
}

When both these DIV elements are positioned identically, it appears as though the image replaces the grid for the period it takes to process the AJAX request and response.

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