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
.
When a loading overlay component is instantiated within the grid, the following will be made available on props
:
No Rows Overlay Component is configured via the grid properties noRowsOverlayComponent
and noRowsOverlayComponentParams
.
When a no rows overlay component is instantiated within the grid, the following will be made available on props
: