• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET Show wait indicator during WebDataGrid’s AJAX Requests
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • -WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
    • Show wait indicator during WebDataGrid’s AJAX Requests
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

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/

  • Progress
  • indicator
  • WebDataGrid
  • AJAX
  • Share
  • History
  • More
  • Cancel
Related
Recommended