Overlays are for displaying messages over the grid.
When using the Client-side Data the grid uses two overlays:
- Loading Overlay: Displayed if
rowData
orcolumnDefs
are initially set tonull
orundefined
. - No Rows Overlay: Displayed if
rowData
is an empty list.
The example above demonstrates the default loading and no rows overlays.
Overlay API
You can manually show the overlays using the grid API.
Customisation
HTML templates can be provided to the overlays using grid properties.
Custom Overlays
This example demonstrates Custom Overlay Components.
Loading Overlays
Loading Overlay Component is configured via the grid properties loadingOverlayComponent
and loadingOverlayComponentParams
.
Any valid Vue component can be a loading overlay component, however it is also possible to implement the following optional methods:
interface ILoadingOverlay {
// Gets called when the `loadingOverlayComponentParams` grid option is updated
refresh(params: ILoadingOverlayParams): void;
}
When a custom loading overlay is instantiated, the following will be made available on this.params
:
No Rows Overlays
No Rows Overlay Component is configured via the grid properties noRowsOverlayComponent
and noRowsOverlayComponentParams
.
Any valid Vue component can be a no rows overlay component, however it is also possible to implement the following optional methods:
interface INoRowsOverlay {
// Gets called when the `noRowsOverlayComponentParams` grid option is updated
refresh(params: INoRowsOverlayParams): void;
}
When a custom no rows overlay is instantiated, the following will be made available on this.params
: