Busy indicator

Do we have a busy indicator option for the Grid while loading data.


Yes, you can use IsLoading:

the property can be bound to an expression as well.

Could you give me an example using this, can we blur or overlay the screen or use an custom indicator for the whole page ?
thank you.

This property will affect just the DataGrid - there is no such component that can be used for the whole page at the moment. Here is how to use DataGrid IsLoading:

You can integrate your own or third party component if you need it for the whole page:

This will do for the most part, thank you for the examples

to display the busy indicator we can import a progressSpinner (PrimeNG) into the View and display it with a property controlled by code:

  1. In VSCode, add ProgressSpinnerModule on app.module
    imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
  2. in global styles.css ad following class:
    .load-indicator {
    position: absolute;
    z-index: 9001;
    left: 50%;
    top: 50%;
  3. In the RAD, add to your view an HTML comopnent from toolbox.
  4. In Properties/Content write:
  5. In Properties/Visibile, write: ${isLoading}
  6. In Load page event set isLoading = false
  7. Add your logic to set isLoading=true when page starts to load data and isLoading=false when loading is completed!
1 Like