JavaScript Data GridOverlays

Overlays are used for displaying messages over the top of the grid. There are two built-in overlays: loading and no-rows.

Loading overlay

Show or hide the loading overlay by setting the loading property to true or false.

loading
boolean
Show or hide the loading overlay.

The loading overlay takes precedence over the no-rows overlay and is not dependent of the state of rowData.

No rows overlay

When rowData is empty / undefined the grid automatically displays the no-rows overlay. The no-rows overlay can also be programmatically shown / hidden via the grid API.

showNoRowsOverlay
Function
Show the no-rows overlay. If suppressNoRowsOverlay is set, or if loading is true, this will not do anything.
hideOverlay
Function
Hide the no-rows overlay if it is showing.

The automatic displaying of the no-rows overlay can be suppressed by setting suppressNoRowsOverlay to true.

Initial loading overlay

If loading is not explicitly defined, the grid will automatically show the loading overlay until both rowData and columnDefs are provided with a non-null value for the first time. This behaviour can be suppressed by initialising the grid with an appropriate loading state.

Customisation

Overlays can be customised by providing either a HTML string or custom component via grid properties.

Custom Loading Overlay

The loading overlay can be customised via the grid properties overlayLoadingTemplate or loadingOverlayComponent and loadingOverlayComponentParams.

overlayLoadingTemplate
string
Provide a HTML string to override the default loading overlay. Supports non-empty plain text or HTML with a single root element.
loadingOverlayComponent
Provide a custom loading overlay component.
loadingOverlayComponentParams
any
Customise the parameters provided to the loading overlay component.

Implement this interface to provide a custom overlay when data is being loaded.


interface ILoadingOverlayComp<TData = any, TContext = any> {
  // 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;

  refresh?(params: TParams): void;

}

This example demonstrates how to provide a custom loading overlay component customised via parameters.

Custom No Rows Overlay

The no-rows overlay can be customised via the grid properties overlayNoRowsTemplate or noRowsOverlayComponent and noRowsOverlayComponentParams.

overlayNoRowsTemplate
string
Provide a HTML string to override the default no-rows overlay. Supports non-empty plain text or HTML with a single root element.
noRowsOverlayComponent
Provide a custom no rows overlay component.
noRowsOverlayComponentParams
any
Customise the parameters provided to the no-rows overlay component.

Implement this interface to provide a custom overlay when no-rows loaded.


interface INoRowsOverlayComp<TData = any, TContext = any> {
  // 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;

  refresh?(params: TParams): void;

}

This example demonstrates how to provide a custom no-rows overlay component customised via parameters.