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 extends ILoadingOverlayAngularComp {
// mandatory methods
// The agInit(params) method is called on the overlay once.
agInit(params: ILoadingOverlayParams);
// optional methods
// Gets called when the `loadingOverlayComponentParams` grid option is updated
refresh(params: ILoadingOverlayParams): void;
}
The agInit(params)
method takes a params object with the items listed below:
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 extends INowRowsOverlayAngularComp {
// mandatory methods
// The agInit(params) method is called on the overlay once.
agInit(params: INoRowsOverlayParams);
// optional methods
// Gets called when the `noRowsOverlayComponentParams` grid option is updated
refresh(params: INoRowsOverlayParams): void;
}
The agInit(params)
method takes a params object with the items listed below: