Vue Data GridGrid Events Reference

To listen to events see Grid Events.

Accessories

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

Clipboard

See Clipboard for more information.

cutStartCopy
CutStartEvent
Cut operation has started.
cutEndCopy
CutEndEvent
Cut operation has ended.
pasteStartCopy
PasteStartEvent
Paste operation has started.
pasteEndCopy
PasteEndEvent
Paste operation has ended.

Columns

columnVisibleCopy
ColumnVisibleEvent
A column, or group of columns, was hidden / shown.
columnPinnedCopy
ColumnPinnedEvent
A column, or group of columns, was pinned / unpinned.
columnResizedCopy
ColumnResizedEvent
A column was resized.
columnMovedCopy
ColumnMovedEvent
A column was moved.
columnValueChangedCopy
ColumnValueChangedEvent
A value column was added or removed.
columnPivotModeChangedCopy
ColumnPivotModeChangedEvent
The pivot mode flag was changed.
columnPivotChangedCopy
ColumnPivotChangedEvent
A pivot column was added, removed or order changed.
columnGroupOpenedCopy
ColumnGroupOpenedEvent
A column group was opened / closed.
newColumnsLoadedCopy
NewColumnsLoadedEvent
User set new columns.
gridColumnsChangedCopy
GridColumnsChangedEvent
The list of grid columns changed.
displayedColumnsChangedCopy
DisplayedColumnsChangedEvent
The list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
virtualColumnsChangedCopy
VirtualColumnsChangedEvent
The list of rendered columns changed (only columns in the visible scrolled viewport are rendered by default).
columnHeaderMouseOverCopy
ColumnHeaderMouseOverEvent
A mouse cursor is initially moved over a column header.
columnHeaderMouseLeaveCopy
ColumnHeaderMouseLeaveEvent
A mouse cursor is moved out of a column header.
columnHeaderClickedCopy
ColumnHeaderClickedEvent
A click is performed on a column header.
columnHeaderContextMenuCopy
ColumnHeaderContextMenuEvent
A context menu action, such as right-click or context menu key press, is performed on a column header.
pivotMaxColumnsExceededCopy
PivotMaxColumnsExceededEvent
Exceeded the pivotMaxGeneratedColumns limit when generating columns.

Components

See Components for more information.

componentStateChangedCopy
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.

cellValueChangedCopy
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.
cellEditRequestCopy
CellEditRequestEvent
Value has changed after editing. Only fires when readOnlyEdit=true.
rowValueChangedCopy
RowValueChangedEvent
A cell's value within a row has changed. This event corresponds to Full Row Editing only.
cellEditingStartedCopy
CellEditingStartedEvent
Editing a cell has started.
cellEditingStoppedCopy
CellEditingStoppedEvent
Editing a cell has stopped.
rowEditingStartedCopy
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.
rowEditingStoppedCopy
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.
undoStartedCopy
UndoStartedEvent
Undo operation has started.
undoEndedCopy
UndoEndedEvent
Undo operation has ended.
redoStartedCopy
RedoStartedEvent
Redo operation has started.
redoEndedCopy
RedoEndedEvent
Redo operation has ended.
cellSelectionDeleteStartCopy
CellSelectionDeleteStartEvent
Cell selection delete operation (cell clear) has started.
cellSelectionDeleteEndCopy
CellSelectionDeleteEndEvent
Cell selection delete operation (cell clear) has ended.

Filtering

See Filtering for more information.

filterOpenedCopy
FilterOpenedEvent
Filter has been opened.
filterChangedCopy
FilterChangedEvent
Filter has been modified and applied.
filterModifiedCopy
FilterModifiedEvent
Filter was modified but not applied. Used when filters have 'Apply' buttons.
advancedFilterBuilderVisibleChangedCopy
AdvancedFilterBuilderVisibleChangedEvent
Advanced Filter Builder visibility has changed (opened or closed).

Integrated Charts

See Integrated Charts Events for more information.

chartCreatedCopy
ChartCreatedEvent
A chart has been created.
chartRangeSelectionChangedCopy
ChartRangeSelectionChangedEvent
The data range for the chart has been changed.
chartOptionsChangedCopy
ChartOptionsChangedEvent
Formatting changes have been made by users through the Customize Panel.
chartDestroyedCopy
ChartDestroyedEvent
A chart has been destroyed.

Keyboard Navigation

See Keyboard Navigation for more information.

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

Miscellaneous

gridReadyCopy
GridReadyEvent
The grid has initialised and is ready for most api calls, but may not be fully rendered yet
gridPreDestroyedCopy
GridPreDestroyedEvent
Invoked immediately before the grid is destroyed. This is useful for cleanup logic that needs to run before the grid is torn down.
firstDataRenderedCopy
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
gridSizeChangedCopy
GridSizeChangedEvent
The size of the grid div has changed. In other words, the grid was resized.
modelUpdatedCopy
ModelUpdatedEvent
Displayed rows have changed. Triggered after sort, filter or tree expand / collapse events.
virtualRowRemovedCopy
VirtualRowRemovedEvent
A row was removed from the DOM, for any reason. Use to clean up resources (if any) used by the row.
viewportChangedCopy
ViewportChangedEvent
Which rows are rendered in the DOM has changed.
bodyScrollCopy
BodyScrollEvent
The body was scrolled horizontally or vertically.
bodyScrollEndCopy
BodyScrollEndEvent
Main body of the grid has stopped scrolling, either horizontally or vertically.
dragStartedCopy
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.
dragStoppedCopy
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.
stateUpdatedCopy
StateUpdatedEvent
Grid state has been updated.
findChangedCopy
FindChangedEvent
Find details have changed (e.g. Find search value, active match, or updates to grid cells).

Pagination

See Row Pagination for more information.

paginationChangedCopy
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.

rowDragEnterCopy
RowDragEnterEvent
A drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid.
rowDragMoveCopy
RowDragMoveEvent
The mouse has moved while dragging.
rowDragLeaveCopy
RowDragLeaveEvent
The mouse has left the grid while dragging.
rowDragEndCopy
RowDragEndEvent
The drag has finished over the grid.
rowDragCancelCopy
RowDragCancelEvent
The drag has been cancelled over the grid.

Row Grouping

See Row Grouping for more information.

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

Row Pinning

See Row Pinning for more information.

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

RowModel: Client-Side

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

RowModel: Server-Side

See Server-Side Row Model for more information.

storeRefreshedCopy
StoreRefreshedEvent
A server side store has finished refreshing.

Selection

headerFocusedCopy
HeaderFocusedEvent
Header is focused.
cellClickedCopy
CellClickedEvent
Cell is clicked.
cellDoubleClickedCopy
CellDoubleClickedEvent
Cell is double clicked.
cellFocusedCopy
CellFocusedEvent
Cell is focused.
cellMouseOverCopy
CellMouseOverEvent
Mouse entered cell.
cellMouseOutCopy
CellMouseOutEvent
Mouse left cell.
cellMouseDownCopy
CellMouseDownEvent
Mouse down on cell.
rowClickedCopy
RowClickedEvent
Row is clicked.
rowDoubleClickedCopy
RowDoubleClickedEvent
Row is double clicked.
rowSelectedCopy
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.
selectionChangedCopy
SelectionChangedEvent
Row selection is changed. Use the selectedNodes field to get the list of selected nodes at the time of the event. When using the SSRM, selectedNodes will be null when selecting all nodes. Instead, refer to the serverSideState field.
cellContextMenuCopy
CellContextMenuEvent
Cell is right clicked.
cellSelectionChangedCopy
CellSelectionChangedEvent
A change to cell selection has occurred.
fillStartCopy
FillStartEvent
Fill operation has started.
fillEndCopy
FillEndEvent
Fill operation has ended.

Sorting

See Row Sorting for more information.

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

Tooltips

See Tooltip Component for more information.

tooltipShowCopy
TooltipShowEvent
A tooltip has been displayed
tooltipHideCopy
TooltipHideEvent
A tooltip was hidden