JavaScript Data GridActive Overlay

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.

Implement the IOverlayComp interface to provide a custom overlay the grid will supply IOverlayParams whenever the component is created or refreshed.

interface IOverlayComp<TData = any, TContext = any, TParams extends Readonly<IOverlayParams<TData, TContext>> = IOverlayParams<TData, TContext>> {
  // Return the DOM element of your component, this is what the grid puts into the DOM 
  getGui(): HTMLElement;

  // Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here 
  destroy?(): void;

  // The init(params) method is called on the component once. 
  init?(params: TParams): AgPromise<void>  |  void;

  // 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.