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 set tonull
orundefined
. - No Rows Overlay: Displayed if
rowData
is an empty list.
You can manually show the overlays using the grid API's showLoadingOverlay()
, showNoRowsOverlay()
and hideOverlay()
.
HTML templates can be provided to the overlays using grid properties overlayLoadingTemplate
and overlayNoRowsTemplate
.
Custom Overlays
This example demonstrates Custom Overlay Components.
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 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
: