Module Extensions
HTMLRevoGridElementEventMap
(Extended from global
)
ts
interface HTMLRevoGridElementEventMap {
/**
* Event for loader
*
* @example
* ```typescript
* grid.addEventListener(LOADER_EVENT, (e) => {
* console.log(e);
* });
*/
[LOADER_EVENT]: boolean
}
Plugin API
LoaderPlugin
The LoaderPlugin
is a RevoGrid plugin designed to manage and display a loading indicator within the grid. This plugin provides a visual cue to users that a background operation is in progress, enhancing user experience by signaling when the grid is busy with data processing tasks.
Functionality:
- Loader Element Integration: Integrates a loader element into the grid's virtual DOM by registering a VNode containing a "loader" class, which can be styled via CSS.
- Event-driven State Management: Listens for
LOADER_EVENT
to toggle the loader's visibility based on the operation's state. This is controlled by adding or removing a "busy" class to the loader element. - Public Method: Provides a
busy
method to programmatically trigger the loading state by emitting theLOADER_EVENT
. This allows external components or processes to indicate grid activity.
Usage:
- To utilize the
LoaderPlugin
, include it in the grid's plugin list and invoke thebusy
method with a boolean parameter to show or hide the loader based on current operations.
Example
typescript
import { LoaderPlugin } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.plugins = [LoaderPlugin];
// Trigger loader
const loaderPlugin = grid.plugins.find(plugin => plugin instanceof LoaderPlugin);
loaderPlugin.busy(true); // Show loader
loaderPlugin.busy(false); // Hide loader
This plugin is ideal for developers looking to provide immediate feedback to users during data-intensive operations, ensuring a responsive and intuitive grid interface.
ts
class LoaderPlugin {
busy(isBusy: boolean);
}