JavaScript Data Grid

Overlays

javascript 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 set to null or undefined.
  2. 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.

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

interface ILoadingOverlayComp {
   // mandatory methods

   // Returns the DOM element for this overlay
   getGui(): HTMLElement;

   // optional methods

   // The init(params) method is called on the overlay once. See below for details on the parameters.
   init(params: ILoadingOverlayParams): void;

   // Gets called when the `loadingOverlayComponentParams` grid option is updated
   refresh(params: ILoadingOverlayParams): void;
}

The interface for the overlay parameters is as follows: