JavaScript Data GridGrid Events Reference

To listen to events see Grid Events.

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. See: Tool Panel Events
toolPanelSizeChanged TypeToolPanelSizeChangedEvent	The tool panel size has been changed. See: Tool Panel Events
columnMenuVisibleChanged TypeColumnMenuVisibleChangedEvent	The column menu visibility has changed. Fires twice if switching between tabs - once with the old tab and once with the new tab. See: Column Menu API / Events
contextMenuVisibleChanged TypeContextMenuVisibleChangedEvent	The context menu visibility has changed (opened or closed). See: Context Menu API / Events

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) `api.applyColumnState()` is used, so everything has changed.
columnHeaderMouseOver TypeColumnHeaderMouseOverEvent	A mouse cursor is initially moved over a column header.
columnHeaderMouseLeave TypeColumnHeaderMouseLeaveEvent	A mouse cursor is moved out of a column header.
columnHeaderClicked TypeColumnHeaderClickedEvent	A click is performed on a column header.
columnHeaderContextMenu TypeColumnHeaderContextMenuEvent	A context menu action, such as right-click or context menu key press, is performed on a column header.
pivotMaxColumnsExceeded TypePivotMaxColumnsExceededEvent	Exceeded the `pivotMaxGeneratedColumns` limit when generating columns.

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. See: Editing Events
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. See: Editing Events
cellEditingStopped TypeCellEditingStoppedEvent	Editing a cell has stopped. See: Editing Events
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. See: Filter Events
filterChanged TypeFilterChangedEvent	Filter has been modified and applied. See: Filter Events
filterModified TypeFilterModifiedEvent	Filter was modified but not applied. Used when filters have 'Apply' buttons. See: Filter Events
advancedFilterBuilderVisibleChanged TypeAdvancedFilterBuilderVisibleChangedEvent	Advanced Filter Builder visibility has changed (opened or closed). See: Advanced Filter

Integrated Charts

See Integrated Charts Events for more information.

chartCreated TypeChartCreatedEvent	A chart has been created. See: Chart Created
chartRangeSelectionChanged TypeChartRangeSelectionChangedEvent	The data range for the chart has been changed. See: Chart Range Selection Changed
chartOptionsChanged TypeChartOptionsChangedEvent	Formatting changes have been made by users through the Customize Panel. See: Chart Options Changed
chartDestroyed TypeChartDestroyedEvent	A chart has been destroyed. See: Chart 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 See: Grid Ready
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. See: Grid Pre-Destroyed
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 See: First Data Rendered
gridSizeChanged TypeGridSizeChangedEvent	The size of the grid `div` has changed. In other words, the grid was resized. See: Grid Layout
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.
stateUpdated TypeStateUpdatedEvent	Grid state has been updated. See: Grid State

Pagination

See Row Pagination for more information.

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 TypeRowDragEnterEvent	A drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid. See: Row Drag Events
rowDragMove TypeRowDragMoveEvent	The mouse has moved while dragging. See: Row Drag Events
rowDragLeave TypeRowDragLeaveEvent	The mouse has left the grid while dragging. See: Row Drag Events
rowDragEnd TypeRowDragEndEvent	The drag has finished over the grid. See: Row Drag Events

Row Grouping

See Row Grouping for more information.

columnRowGroupChanged TypeColumnRowGroupChangedEvent	A row group column was added, removed or reordered.
rowGroupOpened TypeRowGroupOpenedEvent	A row group was opened or closed.
expandOrCollapseAll TypeExpandOrCollapseAllEvent	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

rowDataUpdated TypeRowDataUpdatedEvent	Client-Side Row Model only. The client has updated data for the grid by either a) setting new Row Data or b) Applying a Row Transaction. See: Row Data Updated
asyncTransactionsFlushed TypeAsyncTransactionsFlushedEvent	Async transactions have been applied. Contains a list of all transaction results. See: Flush Async Transactions

RowModel: Server-Side

See Server-Side Row Model for more information.

TypeStoreRefreshedEvent

A server side store has finished refreshing.

See: SSRM Refresh

Selection

See Selection Overview for more information.

headerFocused TypeHeaderFocusedEvent	Header is focused.
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. See: Selection Events
selectionChanged TypeSelectionChangedEvent	Row selection is changed. Use the grid API `getSelectedNodes()` or `getSelectedRows()` to get the new list of selected nodes / row data. See: Selection Events
cellContextMenu TypeCellContextMenuEvent	Cell is right clicked.
rangeSelectionChanged TypeRangeSelectionChangedEvent	A change to range selection has occurred. See: Range Selection Changed Event
fillStart TypeFillStartEvent	Fill operation has started. See: Fill Range Event
fillEnd TypeFillEndEvent	Fill operation has ended. See: Fill Range Event

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

Accessories

toolPanelVisibleChanged

toolPanelSizeChanged

columnMenuVisibleChanged

contextMenuVisibleChanged

Clipboard

cutStart

cutEnd

pasteStart

pasteEnd

Columns

columnVisible

columnPinned

columnResized

columnMoved

columnValueChanged

columnPivotModeChanged

columnPivotChanged

columnGroupOpened

newColumnsLoaded

gridColumnsChanged

displayedColumnsChanged

virtualColumnsChanged

columnEverythingChanged

columnHeaderMouseOver

columnHeaderMouseLeave

columnHeaderClicked

columnHeaderContextMenu

pivotMaxColumnsExceeded

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

stateUpdated

Pagination

paginationChanged

Row Drag and Drop

rowDragEnter

rowDragMove

rowDragLeave

rowDragEnd

Row Grouping

columnRowGroupChanged

rowGroupOpened