Search

Angular Data GridOverlays

angular logo

Overlays are for displaying messages over the grid.

When using the Client-side Data the grid uses two overlays:

  1. Loading Overlay: Displayed if rowData or columnDefs are initially set to null or undefined.
  2. No Rows Overlay: Displayed if rowData is an empty list.

The example above demonstrates the default loading and no rows overlays.

Overlay API

You can manually show the overlays using the grid API.

Customisation

HTML templates can be provided to the overlays using grid properties.

Custom Overlays

This example demonstrates Custom Overlay Components.

Loading Overlays

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:

Properties available on the ILoadingOverlayParams<TData = any, TContext = any> interface.

No Rows Overlays

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:

Properties available on the INoRowsOverlayParams<TData = any, TContext = any> interface.