Grid Events
All of these grid events are available through the GridOptions
interface.
This is done by prefixing the event name with 'on', for instance gridOptions.onCellClicked
.
TypeScript users can take advantage of the events interfaces. You can work our the interface name by putting
Event
after the event name. For example, the cellClicked
event uses the interface CellClickedEvent
.
See the Event Properties & Hierarchy below for what properties each event has.
Selection
cellClicked |
Cell is clicked.
|
cellDoubleClicked |
Cell is double clicked.
|
cellFocused |
Cell is focused. |
cellMouseOver, cellMouseOut, cellMouseDown |
Mouse enters / leaves cell / mouse down |
rowClicked |
Row is clicked. |
rowDoubleClicked |
Row is double clicked. |
rowSelected |
Row is selected or deselected. |
selectionChanged |
Row selection is changed. Use the grid API to get the new row selected. |
cellContextMenu |
Cell is right clicked. |
rangeSelectionChanged |
A change to range selection has occurred. |
Editing
cellValueChanged |
Value has changed after editing. |
rowValueChanged |
A cells value within a row has changed. This event corresponds to
Full Row Editing only.
|
cellEditingStarted, cellEditingStopped |
Editing a cell has started / stopped. |
rowEditingStarted, rowEditingStopped |
Editing a row has started / stopped (when row editing is enabled). When row editing, these events
will be fired once and cellEditingStarted / cellEditingStopped will be fired for each
individual cell. These events correspond to
Full Row Editing only.
|
pasteStart, pasteEnd |
Paste operation has started / ended. See
Clipboard Events.
|
Sort & Filter
sortChanged |
Sort has changed, grid also listens for this and updates the model.
|
filterChanged |
Filter has modified and applied.
|
filterModified |
Filter was modified but not applied. Used when filters have 'Apply' buttons.
|
Row Drag & Drop
rowDragEnter |
A drag has started, or dragging already started and the mouse
has re-entered the grid having previously left the grid.
|
rowDragMove |
The mouse has moved while dragging.
|
rowDragLeave |
The mouse has left the grid while dragging.
|
rowDragEnd |
The drag has finished over the grid.
|
Columns
columnVisible |
A column, or group of columns, was hidden / shown. |
columnPinned |
A column, or group of columns, was pinned / unpinned. |
columnResized |
A column was resized. |
columnMoved |
A column was moved. To find out when the column move is finished you can use the dragStopped event below.
|
columnRowGroupChanged |
A row group column was added or removed. |
columnValueChanged |
A value column was added or removed. |
columnPivotModeChanged |
The pivot mode flag was changed |
columnPivotChanged |
A pivot column was added, removed or order changed. |
columnGroupOpened |
A column group was opened / closed. |
newColumnsLoaded |
User has set in new columns. |
gridColumnsChanged |
The list of grid columns has changed. |
displayedColumnsChanged |
The list of displayed columns has changed, can result from columns open / close, column move, pivot, group, etc.
|
virtualColumnsChanged |
The list of rendered columns has changed (only columns in the visible scrolled viewport are rendered by
default).
|
columnEverythingChanged |
Shotgun - gets called when either a) new columns are set or b) columnApi.setState() is used, so
everything has changed.
|
Miscellaneous
gridReady |
ag-Grid has initialised. The name 'ready'
was influenced by the authors time programming the Commodore 64. Use this event if,
for example, you need to use the grid's API to fix the columns to size.
|
gridSizeChanged |
The size of the grid DIV has changed. In other words, the grid was resized.
|
modelUpdated |
Displayed rows have changed. Happens following sort, filter or tree expand / collapse events. |
firstDataRendered |
Fired the first time data is rendered into the grid. |
rowGroupOpened |
A row group was opened or closed. |
expandOrCollapseAll |
Fired when calling either of the api methods expandAll() or collapseAll() . |
paginationChanged |
The displayed page for pagination has changed. For example the data was filtered or sorted, or the user
has moved to a different page.
|
pinnedRowDataChanged |
The client has set new pinned row data into the grid |
virtualRowRemoved |
A row was removed from the dom, for any reason. Use to clean up resources (if any) used by the row. |
viewportChanged |
Informs when rows rendered into the DOM changes. |
bodyScroll |
Informs when the body is scrolled horizontally or vertically. |
dragStarted, dragStopped |
When column dragging starts or stops. Useful if you want to wait until after a drag
event before doing an action.
|
rowDataChanged |
The client has set new data into the grid using api.setRowData() or changing
the rowData bound property. |
rowDataUpdated |
The client has updated data for the grid using api.updateRowData(transaction) or changing
the rowData bound property with deltaRowDataMode=true . |
toolPanelVisibleChanged |
The tool panel was hidden or shown. Use api.isToolPanelShowing() to get status.. |
componentStateChanged |
Only used by React, Angular, Web Components, Polymer and VueJS ag-Grid components
(not used if doing plain JavaScript or Angular 1.x). If the grid receives changes due
to bound properties, this event fires after the grid has finished processing the
change.
|
animationQueueEmpty |
The grid draws rows and cells using animation frames. This event gets fired when the animation
frame queue is empty. Used normally in conjunction with api.isAnimationFrameQueueEmpty()
so user can check if animation frame is pending, and if yes then can be notified when no animation
frames are pending. Useful if your application needs to know when drawing of the grid is no longer
pending, eg for sending to a printer.
|
cellKeyDown |
DOM event keyDown happened on a cell. See
Keyboard Events.
|
cellKeyPress |
DOM event keyPress happened on a cell. See
Keyboard Events.
|
Event Properties & Hierarchy
Below shows the event hierarchy and properties. All properties are inherited. For example the CellValueChangedEvent
has properties:
<span class="event-properties">// all properties, including inherited, for CellValueChangedEvent</span>
CellValueChangedEvent {
type, api, columnApi, <span class="event-properties">// -> properties from AgEvent</span>
node, data, rowIndex, rowPinned, context, event, <span class="event-properties">// -> properties from RowEvent</span>
column, colDef, value, <span class="event-properties">// -> properties from CellEvent</span>
oldValue, newValue <span class="event-properties">// -> properties from CellValueChangedEvent</span>
}
//---------------------------------------------------------//
// Event hierarchy, and properties, for all ag-Grid events //
//---------------------------------------------------------//
└── AgEvent {
│ type: string, // the event type, eg 'sortChanged' or 'columnResized'
│ }
└── AgGridEvent
│ api: GridAPI, // see Grid API
│ columnApi: ColumnAPI // see Column API
│ }
├── GridReadyEvent {}
├── SelectionChangedEvent {}
├── SortChangedEvent {}
├── RowDataChangedEvent {}
├── RowDataUpdatedEvent {}
├── PinnedRowDataChangedEvent {}
├── NewColumnsLoadedEvent {}
├── GridColumnsChangedEvent {}
├── VirtualColumnsChangedEvent {}
├── ColumnPivotModeChangedEvent {}
├── ColumnEverythingChangedEvent {}
├── DisplayedColumnsChangedEvent {}
├── ToolPanelVisibleChangedEvent {}
├── AnimationQueueEmptyEvent {}
├── FilterChangedEvent {}
├── FilterModifiedEvent {
│ column: Column, // the column for the event
│ filterInstance: number, // the filter instance
│ }
├── CellFocusedEvent {
│ rowIndex: number, // the row index of the focused cell
│ column: Column, // the column of the focused cell
│ rowPinned: string, // either 'top', 'bottom' or undefined/null (if not pinned)
│ forceBrowserFocus: boolean // whether browser focus is also set (false when editing)
│ }
├── ViewportChangedEvent {
│ firstRow: number, // the index of the first rendered row
│ lastRow: number // the index of the last rendered row
│ }
├── FirstDataRendereredEvent {
│ firstRow: number, // the index of the first rendered row
│ lastRow: number // the index of the last rendered row
│ }
├── GridSizeChangedEvent {
│ clientWidth: number, // the grids DIV's clientWidth
│ clientHeight: number // the grids DIV's clientHeight
│ }
├── RangeSelectionChangedEvent {
│ started: boolean, // true for first event in a sequence of dragging events
│ finished: boolean // true for last event in sequence of dragging events
│ }
├── ColumnGroupOpenedEvent {
│ columnGroup: OriginalColumnGroup // the original column group that was opened
│ }
├── BodyScrollEvent {
│ direction: string // either 'horizontal' or 'vertical'
│ top: number // top px of the scroll
│ left: number // left px of the scroll
│ }
├── PaginationChangedEvent {
│ animate: boolean, // true if rows were animated to new position
│ keepRenderedRows: boolean, // true if rows were kept (otherwise complete redraw)
│ newData: boolean, // true if data was new (ie user set new data)
│ newPage: boolean // true if user went to a new pagination page
│ }
├── ModelUpdatedEvent {
│ animate: boolean, // true if rows were animated to new position
│ keepRenderedRows: boolean, // true if rows were kept (otherwise complete redraw)
│ newData: boolean, // true if data was new (ie user set new data)
│ newPage: boolean // true if user went to a new pagination page
│ }
├── ComponentStateChangedEvent {
│ // one attribute for each changed property
│ }
├── ExpandCollapseAllEvent {
│ source: string
│ }
├── DragEvent {
│ │ type: string, // one of {'cell','row','headerCell','toolPanel'}
│ │ }
│ ├── DragStartedEvent {}
│ ├── DragStoppedEvent {}
├── RowDragEvent { // abstract event, never fired
│ │ event: MouseEvent, // The underlying mouse move event associated with the drag.
│ │ node: RowNode, // The row node getting dragged.
│ │ overIndex: number, // The row index the mouse is dragging over.
│ │ overNode: RowNode, // The row node the mouse is dragging over.
│ │ y: number, // The vertical pixel location the mouse is over.
│ │ vDirection: string, // Direction of the drag, either 'up', 'down' or null.
│ │ }
│ ├── RowDragEnterEvent {} // row drag has started / re-entered
│ ├── RowDragMoveEvent {} // mouse moved while dragging
│ ├── RowDragEndEvent {} // row drag finished while mouse over grid
│ ├── RowDragLeaveEvent {} // mouse left grid while dragging
├── ColumnEvent {
│ │ column: Column, // the impacted column, only set if action was on one column
│ │ columns: Column[] // list of all impacted columns
│ │ source: string // A string describing where the event is coming from
│ │ }
│ ├── ColumnPivotChangedEvent {} // a column was added / removed to pivot list
│ ├── ColumnRowGroupChangedEvent {} // a column was added / removed to row group list
│ ├── ColumnValueChangedEvent {} // a column was added / removed to values list
│ ├── ColumnMovedEvent {
│ │ toIndex: number // the position the column was moved to
│ │ }
│ ├── ColumnResizedEvent {
│ │ finished: boolean // set to true for last event in a sequence of move events
│ │ }
│ ├── ColumnVisibleEvent {
│ │ visible: boolean // true if column was set to visible, false if set to hide
│ │ }
│ └── ColumnPinnedEvent {
│ pinned: string // either 'left', 'right', or undefined / null (it not pinned)
│ }
└── RowEvent {
│ node: RowNode, // the RowNode for the row in question
│ data: any, // the user provided data for the row in question
│ rowIndex: number, // the visible row index for the row in question
│ rowPinned: string, // either 'top', 'bottom' or undefined / null (if not pinned)
│ context: any, // bag of attributes, provided by user, see Context
│ event?: Event // if even was due to browser event (eg click), then this is browser event
│ }
├── RowSelectedEvent {}
├── RowClickedEvent {}
├── RowDoubleClickedEvent {}
├── RowEditingStartedEvent {}
├── RowEditingStoppedEvent {}
├── RowGroupOpenedEvent {}
├── RowValueChangedEvent {}
├── VirtualRowRemovedEvent {}
└── CellEvent {
│ column: Column, // the column for the cell in question
│ colDef: ColDef, // the column definition for the cell in question
│ value: any // the value for the cell in question
│ }
├── CellClickedEvent {}
├── CellMouseDownEvent {}
├── CellDoubleClickedEvent {}
├── CellMouseOverEvent {}
├── CellMouseOutEvent {}
├── CellContextMenuEvent {}
├── CellEditingStartedEvent {}
├── CellEditingStoppedEvent {}
├── CellKeyDown {}
├── CellKeyPress {}
└── CellValueChangedEvent {
oldValue: any, // the old value before editing
newValue: any // the new value after editing
}