Waiting Indicator

When the DikeGrid is waiting or processing rows of data, it shows a message. You can customize this message.

The DikeGrid definition overlaps a div element over the primary DikeGrid container, as you can see in the following screenshot. The yellow highlighted div is the primary DikeGrid container.

Waiting Indicator div element

Loading Indicator

When the DikeGrid instance is waiting for the rows of data to display, it blocks its UI and shows a message. The message indicates this waiting.

Let us add a delay when the SampleData service loads the rows of data to see the displayed message.

grid-structure.component.ts

ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(1000).pipe(delay(2000));
}

Loading Indicator

You can customize the displayed message by providing an Injection Token called LOADING_MESSAGE.

Let us give the module this value for the above Injection Token.

structure.module.ts

@NgModule({
  providers: [
    { provide: LOADING_MESSAGE, useValue: 'Loading rows of data, please wait...' }
  ]
})
export class StructureModule { }

Loading Indicator - Custom Message

Processing Indicator

When the DikeGrid instance is processing an edition operation, it blocks its UI and shows a processing message.

You can customize the displayed message by providing an Injection Token called PROCESSING_MESSAGE.

Displaying the indicator using the API

When you query a DikeGridComponent instance from the view, you can access a property called waitingIndicator of type DikeGridWaitingIndicator.

See the DikeGridWaitingIndicator definition for more details.

You can show the Waiting Indicator imperatively invoking the methods defined in the waitingIndicator property.

Let us modify the code to allow entering a custom message and display it.

grid-structure.component.html

<div class="p-4 leading-6 text-secondary"><strong>Waiting Indicator message</strong></div>
<div class="p-4 flex flex-row flex-wrap justify-around items-center">
    <mat-form-field class="flex-auto w-80 mr-5">
        <mat-label>Custom message</mat-label>
        <input matInput
            type="text"
            [formControl]="customMessage">

        <mat-hint align="end">Text value</mat-hint>
        <mat-error *ngIf="customMessage.hasError('required')">Required</mat-error>
    </mat-form-field>
    <button mat-raised-button
        class="flex-none w-32 mr-5 mb-3"
        color="primary"
        [disabled]="!customMessage.valid"
        (click)="onDisplayWaitingIndicator()">Show Indicator
    </button>
    <button mat-raised-button
        class="flex-none w-32 mr-5 mb-3"
        color="primary"
        (click)="onHideWaitingIndicator()">Hide Indicator
    </button>
</div>

<dike-grid id="grid-structure" #grid="dkgGrid">
</dike-grid>

grid-structure.component.ts

@Component({
  selector: 'grid-structure',
  templateUrl: './grid-structure.component.html',
  styleUrls: ['./grid-structure.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridStructureComponent implements OnInit, OnDestroy {

  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;

  customMessage: FormControl;

  constructor() {
    this.customMessage = new FormControl('', Validators.required);
  }

  onDisplayWaitingIndicator(): void {
    this.dikeGrid.waitingIndicator.customMessageIndicator(this.customMessage.value as string);
  }

  onHideWaitingIndicator(): void {
    this.dikeGrid.waitingIndicator.hideWaitingIndicator();
  }
}

The previous configuration adds:

1. A textbox to enter the custom message.

2. Two buttons to display and hide the Waiting Indicator, respectively.

3. Callbacks in the prior UI controls.

Then, clicking on the Show Indicator button generates the following output:

Displaying the indicator using the API