Events and Callbacks

As users interact with the grid, various events are triggered, allowing your application to respond dynamically to those actions.

Using the Event Service

The grid’s event handling is managed through the EventService, a singleton class that allows you to add, remove, and trigger event listeners.

Adding Event Listeners

To listen for specific events, use the addEventListener method of the EventService. The event listener is a function that will be called whenever the specified event occurs.

const eventService = gridClass.getEventService();
const onDataCellSelect = (data) => {
    console.log("Data cell selected", data);
};

// Add the event listener
eventService.addEventListener(EventType.DATA_CELL_SELECT, onDataCellSelect);

Removing Event Listeners

To stop listening for an event, use the removeEventListener method:

// Remove the event listener
eventService.removeEventListener(EventType.DATA_CELL_SELECT, onDataCellSelect);

List of Available Events

Below is a comprehensive list of all available events that you can listen to, along with their corresponding data structure:

Event Name	Trigger	Data Structure
DATA_CELL_SELECT	Triggered when a data cell is selected.	{ value: ICellValue | ICellValueObj }
DATA_CELL_FIX_WIDTH_RESIZE	Triggered when a data cell’s width is resized.	{ value: ICellValue | ICellValueObj }
DATA_CELL_FIX_HEIGHT_RESIZE	Triggered when a data cell’s height is resized.	{ value: ICellValue | ICellValueObj }
DATA_CELL_FIX_HEIGHT_WIDTH_RESIZE	Triggered when both width and height of a data cell are resized.	{ value: ICellValue | ICellValueObj }
COLUMN_HEADER_CELL_FIX_WIDTH_RESIZE	Triggered when a column header cell’s width is resized.	{ value: ICellValue | ICellValueObj }
COLUMN_HEADER_CELL_FIX_HEIGHT_RESIZE	Triggered when a column header cell’s height is resized.	{ value: ICellValue | ICellValueObj }
COLUMN_HEADER_CELL_FIX_HEIGHT_WIDTH_RESIZE	Triggered when both width and height of a column header cell are resized.	{ value: ICellValue | ICellValueObj }
ROW_HEADER_CELL_FIX_WIDTH_RESIZE	Triggered when a row header cell’s width is resized.	{ value: ICellValue | ICellValueObj }
ROW_HEADER_CELL_FIX_HEIGHT_RESIZE	Triggered when a row header cell’s height is resized.	{ value: ICellValue | ICellValueObj }
ROW_HEADER_CELL_FIX_HEIGHT_WIDTH_RESIZE	Triggered when both width and height of a row header cell are resized.	{ value: ICellValue | ICellValueObj }
HEADER_CELL_SELECT	Triggered when a header cell is selected.	{ dimensionId: string; headerId: string; value: any }
DATA_CELL_RESIZE	Triggered when a data cell is resized.	{ cellKey: string; cellId: string; width: number; height: number }
HEADER_CELL_RESIZE	Triggered when a header cell is resized.	{ headerData: any; width: number; height: number }
DIMENSION_CELL_OPTIONS_UPDATE	Triggered when options for a dimension cell are updated.	{ dimension: string; currentData: ICellOptionsModalData; newData: ICellOptionsModalData }
LAYOUTS_UPDATE	Triggered when a layout is updated.	{ currentData: ILayout; newData: ILayout }
LAYOUTS_COPY	Triggered when a layout is copied.	{ originalLayout: ILayout; copiedLayout: ILayout }
LAYOUTS_DELETE	Triggered when a layout is deleted.	{ deletedLayout: ILayout }
LAYOUTS_RESET	Triggered when layouts are reset.	{ currentData: ILayout; newData: ILayout }
LAYOUTS_SHOW	Triggered when a layout is selected to be shown.	{ currentData: ILayout; newData: ILayout }
DIMENSION_DRAG_START	Triggered when dragging of a dimension starts.	{ dimension: string }
DIMENSION_DRAG_OVER	Triggered when a dimension is dragged over another.	{ dimension: string; hoveredDimension: string }
DIMENSION_DRAG_END	Triggered when a dimension is dropped after dragging.	{ operation: "swap" | "left" | "right" | "above" | "between"; dimensionId: string; droppedOnDimension: string }
DIMENSION_DRAG_CANCELLED	Triggered when dragging of a dimension is cancelled.	{ dimensionId: string }
ON_SCROLL	Triggered when the grid is scrolled.	{ scrollX: number; scrollY: number }
DIMENSION_FILTER	Triggered when a filter is applied to a dimension.	{ dimension: string; selectedMeasure: string; selectedMeasureType: string; condition: string; value: string | number | Date | [Date | null, Date | null] | undefined | null | boolean }
DIMENSION_SORT	Triggered when a dimension is sorted.	{ dimension: string; selectedMeasure: string; direction: "asc" | "desc" }
HEADER_MORE_MENU_CLOSED	Triggered when the “more” menu on a header is closed.	{ dimension: string }
HEADER_MORE_MENU_OPENED	Triggered when the “more” menu on a header is opened.	{ dimension: string }
GRID_LOADING_STARTED	Triggered when grid loading starts.	null | Record<string | number | symbol, unknown>
GRID_LOADING_COMPLETE	Triggered when grid loading completes.	null | Record<string | number | symbol, unknown>

Example Usage

Here’s a practical example showing how to add an event listener and respond to a DATA_CELL_SELECT event:

const eventService = gridClass.getEventService();

const onDataCellSelect = (data) => {
    console.log("Cell selected with value:", data);
};

eventService.addEventListener(EventType.DATA_CELL_SELECT, onDataCellSelect);

// Later in the code...
eventService.removeEventListener(EventType.DATA_CELL_SELECT, onDataCellSelect);