Applications can display an overlay on demand regardless of grid state. This is achieved by providing an active overlay which can be one of the provided overlays or be a custom overlay component.
Display an Active Overlay Copy Link
To display an overlay on demand set the activeOverlay / activeOverlayParams grid option. To clear the overlay set activeOverlay = undefined.
Display an overlay on demand. If provided takes precedence over the grid provided overlays. agLoadingOverlay, agNoRowsOverlay, agNoMatchingRowsOverlay, agExportingOverlay components map. undefined to clear. |
Custom parameters to be supplied to the activeOverlay component in addition to IOverlayParams. Updating the params will trigger a refresh of the active overlay. |
Any valid Vue component can be used, however the optional IOverlay interface exposes lifecycle hooks that receive IOverlayParams.
interface IOverlay<TData = any, TContext = any, TParams extends Readonly<IOverlayParams<TData, TContext>> = IOverlayParams<TData, TContext>> {
// Gets called when the `overlayComponentParams` grid option is updated
refresh?(params: TParams): void;
}The example below demonstrates using the grid provided overlays as an active overlay. Note the following:
- activeOverlays take precedence over the provided loading overlay.
- activeOverlay can be displayed no matter what the grid state, i.e showing the no-rows overlay even when there are rows.
- StatusOverlay is registered in the components map and shown by setting
activateOverlay = "statusOverlay"to the key used.