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
.
Implement this interface to provide a custom overlay when data is being loaded.
interface ILoadingOverlayComp {
// mandatory methods
// Returns the DOM element for this overlay
getGui(): HTMLElement;
// optional methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: ILoadingOverlayParams): void;
// Gets called when the `loadingOverlayComponentParams` grid option is updated
refresh(params: ILoadingOverlayParams): void;
}
The interface for the overlay parameters is as follows:
No Rows Overlay Component is configured via the grid properties noRowsOverlayComponent
and noRowsOverlayComponentParams
.
Implement this interface to provide a custom overlay when no rows loaded.
interface INoRowsOverlayComp {
// mandatory methods
// Returns the DOM element for this overlay
getGui(): HTMLElement;
// optional methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: INoRowsOverlayParams): void;
// Gets called when the `noRowsOverlayComponentParams` grid option is updated
refresh(params: INoRowsOverlayParams): void;
}
The interface for the overlay parameters is as follows: