Show wait indicator during WebDataGrid’s AJAX Requests

When you are using the WebDataGrid connected to the DataSource and have enabled built-in AJAX behaviors like paging, sorting.. etc that require an AJAX call to the server, it is nice to show a wait indicator so that the users know that there is a request being processed. In a scenario where the data set size is small, and the request is processed without an issue, you might think there is no need for such an indicator. But, in case a request gets jammed at the server either due to a resource becoming unavailable or just the server taking  longer to process, the wait indicator can make that wait experience nicer .

 

Due to the client-side event naming conventions that Aikido controls follow, an event ending with “ing” means that it fires before the actual operation is performed on the control and is cancellable, whereas, if an event ends with “ed” it is fired after the operation has been completed. So, no we  need to figure out the AJAX behaviors we are using within the WebDataGrid, handle “ing” and “ed” events for those behaviors and show and hide our indicators accordingly.

 

First we will need an image on the page and hide it initially so that its not visible, and show it when the WebDataGrid makes and AJAX request.

 

<img src="ajax-loader.gif" id="loadinggif" style="z-index: 101; position: absolute; visibility:hidden;">

 

Note: “ajax-loader.gif” is an animated image that shows loading in progress. Here, you can use a wait image of your own.

 

So, lets take an example of filtering behavior of the WebDataGrid. In order to place the wait indicator, we will use the “DataFiltering” and “DataFiltered” client-side event where we will show and hide the wait indicator. Within JavaScript, we can now do the following: 

function DataFiltering() {

      //Get the grid element and disable on the client
      var gridElement = $find("WebDataGrid1").get_element();
      gridElement.disabled = true;
            
      //Align the image to the center of the grid
      document.getElementById("loadinggif").style.left = gridElement.offsetLeft + (gridElement.offsetWidth / 2);
      document.getElementById("loadinggif").style.top = gridElement.offsetTop + (gridElement.offsetHeight / 2);
            
      //Show the loading image
      document.getElementById("loadinggif").style.visibility = 'visible';
}

function DataFiltered() {

      //Get the grid element and enable it
      var gridElement = $find("WebDataGrid1").get_element();
      gridElement.disabled = false;

      //Hide the loading image
      document.getElementById("loadinggif").style.visibility = 'hidden';
            
}

 

Using the above example, you can use the wait indicator during WebDataGrid’s other ajax operations as well. There are a lot of places online where you can get nice animated images for wait indicators, here is the one that I normally use. It also lets you pick and choose different animated images, select your choice of colors and generates an image for you.

 

http://www.ajaxload.info/

Related
Recommended