JavaScript Data GridGrid Events

This is a list of all the events that the grid raises.

You register callbacks for these events through the GridOptions interface. The name of the callback is constructed by prefixing the event name with on. For example, the callback for the cellClicked event is gridOptions.onCellClicked.

const gridOptions = {
     // Add event handlers
     onCellClicked: (event: CellClickedEvent) => console.log('Cell was clicked'),
 }

TypeScript users can take advantage of the events' interfaces. You can construct the interface name by suffixing the event name with Event. For example, the cellClicked event uses the interface CellClickedEvent. All events support generics. See Typescript Generics for more details.

Registering via Grid Options

Registering the event onto the grid component as shown above is the recommended way. However additionally a callback can be put on the Grid Options, if you are using a Grid Options object. The name of the callback is constructed by prefixing the event name with on. For example, the callback for the cellClicked event is gridOptions.onCellClicked.

const gridOptions = {
     // Add event handlers
     onCellClicked: (event: CellClickedEvent) => console.log('Cell was clicked'),
 }

List of Events

The following are all events emitted by the grid. If using TypeScript, you can reference the interface for each event.

Accessories

toolPanelVisibleChanged TypeToolPanelVisibleChangedEvent	The tool panel visibility has changed. Fires twice if switching between panels - once with the old panel and once with the new panel.
toolPanelSizeChanged TypeToolPanelSizeChangedEvent	The tool panel size has been changed.

Clipboard

See Clipboard for more information.

cutStart TypeCutStartEvent	Cut operation has started. See: Clipboard Events
cutEnd TypeCutEndEvent	Cut operation has ended. See: Clipboard Events
pasteStart TypePasteStartEvent	Paste operation has started. See: Clipboard Events
pasteEnd TypePasteEndEvent	Paste operation has ended. See: Clipboard Events

Columns

columnVisible TypeColumnVisibleEvent	A column, or group of columns, was hidden / shown.
columnPinned TypeColumnPinnedEvent	A column, or group of columns, was pinned / unpinned.
columnResized TypeColumnResizedEvent	A column was resized.
columnMoved TypeColumnMovedEvent	A column was moved.
columnValueChanged TypeColumnValueChangedEvent	A value column was added or removed.
columnPivotModeChanged TypeColumnPivotModeChangedEvent	The pivot mode flag was changed.
columnPivotChanged TypeColumnPivotChangedEvent	A pivot column was added, removed or order changed.
columnGroupOpened TypeColumnGroupOpenedEvent	A column group was opened / closed.
newColumnsLoaded TypeNewColumnsLoadedEvent	User set new columns.
gridColumnsChanged TypeGridColumnsChangedEvent	The list of grid columns changed.
displayedColumnsChanged TypeDisplayedColumnsChangedEvent	The list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
virtualColumnsChanged TypeVirtualColumnsChangedEvent	The list of rendered columns changed (only columns in the visible scrolled viewport are rendered by default).
columnEverythingChanged TypeColumnEverythingChangedEvent	Shotgun - gets called when either a) new columns are set or b) `columnApi.applyColumnState()` is used, so everything has changed.

Components

See Components for more information.

TypeComponentStateChangedEvent

Only used by Angular, React and VueJS AG Grid components (not used if doing plain JavaScript). If the grid receives changes due to bound properties, this event fires after the grid has finished processing the change.

Editing

See Cell Editing for more information.

cellValueChanged TypeCellValueChangedEvent	Value has changed after editing (this event will not fire if editing was cancelled, eg ESC was pressed) or if cell value has changed as a result of cut, paste, cell clear (pressing Delete key), fill handle, copy range down, undo and redo.
cellEditRequest TypeCellEditRequestEvent	Value has changed after editing. Only fires when `readOnlyEdit=true`. See: Read Only Edit
rowValueChanged TypeRowValueChangedEvent	A cell's value within a row has changed. This event corresponds to Full Row Editing only. See: Full Row Editing
cellEditingStarted TypeCellEditingStartedEvent	Editing a cell has started.
cellEditingStopped TypeCellEditingStoppedEvent	Editing a cell has stopped.
rowEditingStarted TypeRowEditingStartedEvent	Editing a row has started (when row editing is enabled). When row editing, this event will be fired once and `cellEditingStarted` will be fired for each individual cell. Only fires when doing Full Row Editing. See: Full Row Editing
rowEditingStopped TypeRowEditingStoppedEvent	Editing a row has stopped (when row editing is enabled). When row editing, this event will be fired once and `cellEditingStopped` will be fired for each individual cell. Only fires when doing Full Row Editing. See: Full Row Editing
undoStarted TypeUndoStartedEvent	Undo operation has started. See: Undo / Redo Events
undoEnded TypeUndoEndedEvent	Undo operation has ended. See: Undo / Redo Events
redoStarted TypeRedoStartedEvent	Redo operation has started. See: Undo / Redo Events
redoEnded TypeRedoEndedEvent	Redo operation has ended. See: Undo / Redo Events
rangeDeleteStart TypeRangeDeleteStartEvent	Range delete operation (cell clear) has started. See: Delete Range
rangeDeleteEnd TypeRangeDeleteEndEvent	Range delete operation (cell clear) has ended. See: Delete Range

Filtering

See Filtering for more information.

filterOpened TypeFilterOpenedEvent	Filter has been opened.
filterChanged TypeFilterChangedEvent	Filter has been modified and applied.
filterModified TypeFilterModifiedEvent	Filter was modified but not applied. Used when filters have 'Apply' buttons.
advancedFilterBuilderVisibleChanged TypeAdvancedFilterBuilderVisibleChangedEvent	Advanced Filter Builder visibility has changed (opened or closed). See: Advanced Filter

Integrated Charts

See Integrated Charts Events for more information.

chartCreated TypeChartCreated	A chart has been created.
chartRangeSelectionChanged TypeChartRangeSelectionChanged	The data range for the chart has been changed.
chartOptionsChanged TypeChartOptionsChanged	Formatting changes have been made by users through the Format Panel.
chartDestroyed TypeChartDestroyed	A chart has been destroyed.

See Keyboard Navigation for more information.

TypeCellKeyDownEvent | FullWidthCellKeyDownEvent

DOM event keyDown happened on a cell.

See: Keyboard Events

Miscellaneous

gridReady TypeGridReadyEvent	The grid has initialised and is ready for most api calls, but may not be fully rendered yet
gridPreDestroyed TypeGridPreDestroyedEvent	Invoked immediately before the grid is destroyed. This is useful for cleanup logic that needs to run before the grid is torn down.
firstDataRendered TypeFirstDataRenderedEvent	Fired the first time data is rendered into the grid. Use this event if you want to auto resize columns based on their contents
gridSizeChanged TypeGridSizeChangedEvent	The size of the grid `div` has changed. In other words, the grid was resized.
modelUpdated TypeModelUpdatedEvent	Displayed rows have changed. Triggered after sort, filter or tree expand / collapse events.
virtualRowRemoved TypeVirtualRowRemovedEvent	A row was removed from the DOM, for any reason. Use to clean up resources (if any) used by the row.
viewportChanged TypeViewportChangedEvent	Which rows are rendered in the DOM has changed.
bodyScroll TypeBodyScrollEvent	The body was scrolled horizontally or vertically.
bodyScrollEnd TypeBodyScrollEndEvent	Main body of the grid has stopped scrolling, either horizontally or vertically.
dragStarted TypeDragStartedEvent	When dragging starts. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.
dragStopped TypeDragStoppedEvent	When dragging stops. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.

Pagination

See Row Pagination for more information.

paginationChanged

TypePaginationChangedEvent

Triggered every time the paging state changes. Some of the most common scenarios for this event to be triggered are:

The page size changes
The current shown page is changed
New data is loaded onto the grid

Row Drag and Drop

See Row Dragging for more information.

rowDragEnter TypeRowDragEvent	A drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid.
rowDragMove TypeRowDragEvent	The mouse has moved while dragging.
rowDragLeave TypeRowDragEvent	The mouse has left the grid while dragging.
rowDragEnd TypeRowDragEvent	The drag has finished over the grid.

Row Grouping

See Row Grouping for more information.

columnRowGroupChanged TypeColumnRowGroupChangedEvent	A row group column was added or removed.
rowGroupOpened TypeRowGroupOpenedEvent	A row group was opened or closed.
expandOrCollapseAll TypeExpandCollapseAllEvent	Fired when calling either of the API methods `expandAll()` or `collapseAll()`.

Row Pinning

See Row Pinning for more information.

TypePinnedRowDataChangedEvent

The client has set new pinned row data into the grid.

RowModel: Client-Side

See Client-Side Row Model for more information.

rowDataUpdated TypeRowDataUpdatedEvent	The client has updated data for the grid by either a) setting new Row Data or b) Applying a Row Transaction.
asyncTransactionsFlushed TypeAsyncTransactionsFlushed	Async transactions have been applied. Contains a list of all transaction results.

RowModel: Server-Side

See Server-Side Row Model for more information.

TypeStoreRefreshedEvent

A server side store has finished refreshing.

Selection

See Selection Overview for more information.

cellClicked TypeCellClickedEvent	Cell is clicked.
cellDoubleClicked TypeCellDoubleClickedEvent	Cell is double clicked.
cellFocused TypeCellFocusedEvent	Cell is focused.
cellMouseOver TypeCellMouseOverEvent	Mouse entered cell.
cellMouseOut TypeCellMouseOutEvent	Mouse left cell.
cellMouseDown TypeCellMouseDownEvent	Mouse down on cell.
rowClicked TypeRowClickedEvent	Row is clicked.
rowDoubleClicked TypeRowDoubleClickedEvent	Row is double clicked.
rowSelected TypeRowSelectedEvent	Row is selected or deselected. The event contains the node in question, so call the node's `isSelected()` method to see if it was just selected or deselected.
selectionChanged TypeSelectionChangedEvent	Row selection is changed. Use the grid API `getSelectedNodes()` or `getSelectedRows()` to get the new list of selected nodes / row data.
cellContextMenu TypeCellContextMenuEvent	Cell is right clicked.
rangeSelectionChanged TypeRangeSelectionChangedEvent	A change to range selection has occurred.

Sorting

See Row Sorting for more information.

TypeSortChangedEvent

Sort has changed. The grid also listens for this and updates the model.

Tooltips

See Tooltip Component for more information.

tooltipShow TypeTooltipShowEvent	A tooltip has been displayed
tooltipHide TypeTooltipHideEvent	A tooltip was hidden

Registering via Grid Options

List of Events

Accessories

toolPanelVisibleChanged

toolPanelSizeChanged

Clipboard

cutStart

cutEnd

pasteStart

pasteEnd

Columns

columnVisible

columnPinned

columnResized

columnMoved

columnValueChanged

columnPivotModeChanged

columnPivotChanged

columnGroupOpened

newColumnsLoaded

gridColumnsChanged

displayedColumnsChanged

virtualColumnsChanged

columnEverythingChanged

Components

componentStateChanged

Editing

cellValueChanged

cellEditRequest

rowValueChanged

cellEditingStarted

cellEditingStopped

rowEditingStarted

rowEditingStopped

undoStarted

undoEnded

redoStarted

redoEnded

rangeDeleteStart

rangeDeleteEnd

Filtering

filterOpened

filterChanged

filterModified

advancedFilterBuilderVisibleChanged

Integrated Charts

chartCreated

chartRangeSelectionChanged

chartOptionsChanged

chartDestroyed

Keyboard Navigation

cellKeyDown

Miscellaneous

gridReady

gridPreDestroyed

firstDataRendered

gridSizeChanged

modelUpdated

virtualRowRemoved

viewportChanged

bodyScroll

bodyScrollEnd

dragStarted

dragStopped

Pagination

paginationChanged

Row Drag and Drop

rowDragEnter

rowDragMove

rowDragLeave

rowDragEnd

Row Grouping

columnRowGroupChanged

rowGroupOpened

expandOrCollapseAll

Row Pinning

pinnedRowDataChanged

RowModel: Client-Side

rowDataUpdated

asyncTransactionsFlushed