Busy indicator

Radzen Studio Angular
1

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

2

Hi,

Yes, you can use IsLoading:

image
image.png1920×1080 163 KB

the property can be bound to an expression as well.

3

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.

4

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:

image
image.png1920×1080 168 KB

image
image.png1920×1080 194 KB

image
image.png1920×1080 137 KB

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

5

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

6

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') : [],
    ...AppImports,
    [cut]
    ProgressSpinnerModule
    ],
  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