Vue Data GridGrid Events Reference

To listen to events see Grid Events.

Accessories

toolPanelVisibleChanged
ToolPanelVisibleChangedEvent
The tool panel visibility has changed. Fires twice if switching between panels - once with the old panel and once with the new panel.
toolPanelSizeChanged
ToolPanelSizeChangedEvent
The tool panel size has been changed.
columnMenuVisibleChanged
ColumnMenuVisibleChangedEvent
The column menu visibility has changed. Fires twice if switching between tabs - once with the old tab and once with the new tab.
contextMenuVisibleChanged
ContextMenuVisibleChangedEvent
The context menu visibility has changed (opened or closed).

Clipboard

See Clipboard for more information.

cutStart
CutStartEvent
Cut operation has started.
cutEnd
CutEndEvent
Cut operation has ended.
pasteStart
PasteStartEvent
Paste operation has started.
pasteEnd
PasteEndEvent
Paste operation has ended.

Columns

columnVisible
ColumnVisibleEvent
A column, or group of columns, was hidden / shown.
columnPinned
ColumnPinnedEvent
A column, or group of columns, was pinned / unpinned.
columnResized
ColumnResizedEvent
A column was resized.
columnMoved
ColumnMovedEvent
A column was moved.
columnValueChanged
ColumnValueChangedEvent
A value column was added or removed.
columnPivotModeChanged
ColumnPivotModeChangedEvent
The pivot mode flag was changed.
columnPivotChanged
ColumnPivotChangedEvent
A pivot column was added, removed or order changed.
columnGroupOpened
ColumnGroupOpenedEvent
A column group was opened / closed.
newColumnsLoaded
NewColumnsLoadedEvent
User set new columns.
gridColumnsChanged
GridColumnsChangedEvent
The list of grid columns changed.
displayedColumnsChanged
DisplayedColumnsChangedEvent
The list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
virtualColumnsChanged
VirtualColumnsChangedEvent
The list of rendered columns changed (only columns in the visible scrolled viewport are rendered by default).
columnHeaderMouseOver
ColumnHeaderMouseOverEvent
A mouse cursor is initially moved over a column header.
columnHeaderMouseLeave
ColumnHeaderMouseLeaveEvent
A mouse cursor is moved out of a column header.
columnHeaderClicked
ColumnHeaderClickedEvent
A click is performed on a column header.
columnHeaderContextMenu
ColumnHeaderContextMenuEvent
A context menu action, such as right-click or context menu key press, is performed on a column header.
pivotMaxColumnsExceeded
PivotMaxColumnsExceededEvent
Exceeded the pivotMaxGeneratedColumns limit when generating columns.

Components

See Components for more information.

componentStateChanged
ComponentStateChangedEvent
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
CellValueChangedEvent
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
CellEditRequestEvent
Value has changed after editing. Only fires when readOnlyEdit=true.
rowValueChanged
RowValueChangedEvent
A cell's value within a row has changed. This event corresponds to Full Row Editing only.
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
rowEditingStarted
RowEditingStartedEvent
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.
rowEditingStopped
RowEditingStoppedEvent
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.
undoStarted
UndoStartedEvent
Undo operation has started.
undoEnded
UndoEndedEvent
Undo operation has ended.
redoStarted
RedoStartedEvent
Redo operation has started.
redoEnded
RedoEndedEvent
Redo operation has ended.
cellSelectionDeleteStart
CellSelectionDeleteStartEvent
Cell selection delete operation (cell clear) has started.
cellSelectionDeleteEnd
CellSelectionDeleteEndEvent
Cell selection delete operation (cell clear) has ended.

Filtering

See Filtering for more information.

filterOpened
FilterOpenedEvent
Filter has been opened.
filterChanged
FilterChangedEvent
Filter has been modified and applied.
filterModified
FilterModifiedEvent
Filter was modified but not applied. Used when filters have 'Apply' buttons.
advancedFilterBuilderVisibleChanged
AdvancedFilterBuilderVisibleChangedEvent
Advanced Filter Builder visibility has changed (opened or closed).

Integrated Charts

See Integrated Charts Events for more information.

chartCreated
ChartCreatedEvent
A chart has been created.
chartRangeSelectionChanged
ChartRangeSelectionChangedEvent
The data range for the chart has been changed.
chartOptionsChanged
ChartOptionsChangedEvent
Formatting changes have been made by users through the Customize Panel.
chartDestroyed
ChartDestroyedEvent
A chart has been destroyed.

Keyboard Navigation

See Keyboard Navigation for more information.

cellKeyDown
CellKeyDownEvent | FullWidthCellKeyDownEvent
DOM event keyDown happened on a cell.

Miscellaneous

gridReady
GridReadyEvent
The grid has initialised and is ready for most api calls, but may not be fully rendered yet
gridPreDestroyed
GridPreDestroyedEvent
Invoked immediately before the grid is destroyed. This is useful for cleanup logic that needs to run before the grid is torn down.
firstDataRendered
FirstDataRenderedEvent
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
GridSizeChangedEvent
The size of the grid div has changed. In other words, the grid was resized.
modelUpdated
ModelUpdatedEvent
Displayed rows have changed. Triggered after sort, filter or tree expand / collapse events.
virtualRowRemoved
VirtualRowRemovedEvent
A row was removed from the DOM, for any reason. Use to clean up resources (if any) used by the row.
viewportChanged
ViewportChangedEvent
Which rows are rendered in the DOM has changed.
bodyScroll
BodyScrollEvent
The body was scrolled horizontally or vertically.
bodyScrollEnd
BodyScrollEndEvent
Main body of the grid has stopped scrolling, either horizontally or vertically.
dragStarted
DragStartedEvent
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
DragStoppedEvent
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
StateUpdatedEvent
Grid state has been updated.

Pagination

See Row Pagination for more information.

paginationChanged
PaginationChangedEvent

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
RowDragEnterEvent
A drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid.
rowDragMove
RowDragMoveEvent
The mouse has moved while dragging.
rowDragLeave
RowDragLeaveEvent
The mouse has left the grid while dragging.
rowDragEnd
RowDragEndEvent
The drag has finished over the grid.
rowDragCancel
RowDragCancelEvent
The drag has been cancelled over the grid.

Row Grouping

See Row Grouping for more information.

columnRowGroupChanged
ColumnRowGroupChangedEvent
A row group column was added, removed or reordered.
rowGroupOpened
RowGroupOpenedEvent
A row group was opened or closed.
expandOrCollapseAll
ExpandOrCollapseAllEvent
Fired when calling either of the API methods expandAll() or collapseAll().

Row Pinning

See Row Pinning for more information.

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

RowModel: Client-Side

rowDataUpdated
RowDataUpdatedEvent
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.
asyncTransactionsFlushed
AsyncTransactionsFlushedEvent
Async transactions have been applied. Contains a list of all transaction results.

RowModel: Server-Side

See Server-Side Row Model for more information.

storeRefreshed
StoreRefreshedEvent
A server side store has finished refreshing.

Selection

headerFocused
HeaderFocusedEvent
Header is focused.
cellClicked
CellClickedEvent
Cell is clicked.
cellDoubleClicked
CellDoubleClickedEvent
Cell is double clicked.
cellFocused
CellFocusedEvent
Cell is focused.
cellMouseOver
CellMouseOverEvent
Mouse entered cell.
cellMouseOut
CellMouseOutEvent
Mouse left cell.
cellMouseDown
CellMouseDownEvent
Mouse down on cell.
rowClicked
RowClickedEvent
Row is clicked.
rowDoubleClicked
RowDoubleClickedEvent
Row is double clicked.
rowSelected
RowSelectedEvent
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
SelectionChangedEvent
Row selection is changed. Use the grid API getSelectedNodes() or getSelectedRows() to get the new list of selected nodes / row data.
cellContextMenu
CellContextMenuEvent
Cell is right clicked.
cellSelectionChanged
CellSelectionChangedEvent
A change to cell selection has occurred.
fillStart
FillStartEvent
Fill operation has started.
fillEnd
FillEndEvent
Fill operation has ended.

Sorting

See Row Sorting for more information.

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

Tooltips

See Tooltip Component for more information.

tooltipShow
TooltipShowEvent
A tooltip has been displayed
tooltipHide
TooltipHideEvent
A tooltip was hidden