Framework:Javascript GridAngular GridReact GridVue Grid

React Grid: Grid Events

This is a list of the events that the grid raises. You can 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.

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.

See the Event Properties and Hierarchy section below to find out what properties each event has.

Selection

cellClicked
Cell is clicked.
cellDoubleClicked
Cell is double clicked.
cellFocused
Cell is focused.
cellMouseOver
Mouse entered cell.
cellMouseOut
Mouse left cell.
cellMouseDown
Mouse down on cell.
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 cell's value within a row has changed. This event corresponds to Full Row Editing only.
cellEditingStarted
Editing a cell has started.
cellEditingStopped
Editing a cell has stopped.
rowEditingStarted
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. This event corresponds to Full Row Editing only.
rowEditingStopped
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. This event corresponds to Full Row Editing only.
pasteStart
Paste operation has started. See Clipboard Events.
pasteEnd
Paste operation has ended. See Clipboard Events.

Sort and Filter

sortChanged
Sort has changed. The grid also listens for this and updates the model.
filterChanged
Filter has been modified and applied.
filterModified
Filter was modified but not applied. Used when filters have 'Apply' buttons.

Row Drag and Drop

rowDragEnter
A drag has started, or dragging was 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 set new columns.
gridColumnsChanged
The list of grid columns changed.
displayedColumnsChanged
The list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
virtualColumnsChanged
The list of rendered columns 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
GridReadyEvent
The grid has initialised. The name 'ready' was influenced by the author's 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
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.
firstDataRendered
FirstDataRendereredEvent
Fired the first time data is rendered into the grid.
rowGroupOpened
RowGroupOpenedEvent
A row group was opened or closed.
expandOrCollapseAll
ExpandCollapseAllEvent
Fired when calling either of the API methods expandAll() or collapseAll().
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
pinnedRowDataChanged
PinnedRowDataChangedEvent
The client has set new pinned row data into the grid.
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.
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.
rowDataChanged
RowDataChangedEvent
The client has set new data into the grid using api.setRowData() or by changing the rowData bound property.
rowDataUpdated
RowDataUpdatedEvent
The client has updated data for the grid using api.applyTransaction(transaction) or by changing the rowData bound property with immutableData=true.
toolPanelVisibleChanged
ToolPanelVisibleChangedEvent
The tool panel was hidden or shown. Use api.isToolPanelShowing() to get status.
componentStateChanged
ComponentStateChangedEvent
Only used by React, Angular 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
AnimationQueueEmptyEvent
The grid draws rows and cells using animation frames. This event gets fired when the animation frame queue is empty. Normally used in conjunction with api.isAnimationFrameQueueEmpty() so user can check if animation frame is pending, and if so 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, e.g. for sending to a printer.
asyncTransactionsFlushed
AsyncTransactionsFlushed
Async transactions have been applied. Contains a list of all transaction results.
cellKeyDown
CellKeyDownEvent | FullWidthCellKeyDownEvent
DOM event keyDown happened on a cell. See Keyboard Events.
cellKeyPress
CellKeyPressEvent | FullWidthCellKeyPressEvent
DOM event keyPress happened on a cell. See Keyboard Events.

Event Properties and Hierarchy

Below shows the event hierarchy and properties. All properties are inherited. For example the CellValueChangedEvent interface has the following properties:

interface CellValueChangedEvent {
    type, api, columnApi, // -> properties from AgEvent
    node, data, rowIndex, rowPinned, context, event, // -> properties from RowEvent
    column, colDef, value, // -> properties from CellEvent
    oldValue, newValue // -> properties from CellValueChangedEvent
}
//---------------------------------------------------------//
// Event hierarchy, and properties, for all AG Grid events //
//---------------------------------------------------------//
└── AgEvent {
    │     type: string, // the event type, eg 'sortChanged' or 'columnResized'
    │   }
    └── AgGridEvent
        │     api: GridAPI, // the Grid API
        │     columnApi: ColumnAPI // the Column API
        │   }
        ├── GridReadyEvent {}
        ├── SelectionChangedEvent {}
        ├── SortChangedEvent {}
        ├── RowDataChangedEvent {}
        ├── RowDataUpdatedEvent {}
        ├── PinnedRowDataChangedEvent {}
        ├── NewColumnsLoadedEvent {}
        ├── GridColumnsChangedEvent {}
        ├── VirtualColumnsChangedEvent {}
        ├── ColumnPivotModeChangedEvent {}
        ├── ColumnEverythingChangedEvent {}
        ├── DisplayedColumnsChangedEvent {}
        ├── ToolPanelVisibleChangedEvent {}
        ├── AnimationQueueEmptyEvent {}
        ├── FilterChangedEvent {afterFloatingFilter: Column, // if filter was changed via floating filter
        │       afterDataChange: number, // if filter was changed as a result of data changing
        │     }
        ├── 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)
        │       isFullWidthCell: boolean, // whether the cell is a full width cell or regular cell.
        │       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
        │     }
        ├── AsyncTransactionsFlushed {
        │       results: (RowNodeTransaction | ServerSideTransactionResult) []
        │     }
        ├── DragEvent {
        │   │    type: string, // one of {'cell','row','headerCell','toolPanel'}
                 target: HTMLElement, // The DOM element that started the event.
        │   │  }
        │   ├── 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. Also the node that started the drag when multi-row dragging.
        │   │    nodes: RowNode[], // The list of nodes being 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
        │   │        flexColumns: Column[] // any columns resized due to flex
        │   │      }
        │   ├── 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](/context/)
            │     event?: Event // if event was due to browser event (eg click), this is browser event
            │   }
            ├── RowSelectedEvent {}
            ├── RowClickedEvent {}
            ├── RowDoubleClickedEvent {}
            ├── RowEditingStartedEvent {}
            ├── RowEditingStoppedEvent {}
            ├── RowGroupOpenedEvent {
            │     expanded: boolean // true if the group is expanded.
            }
            ├── RowValueChangedEvent {}
            ├── VirtualRowRemovedEvent {}
            ├── FullWidthCellKeyDownEvent {}
            ├── FullWidthCellKeyPressEvent {}
            └── 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 {}
                ├── CellKeyDownEvent {}
                ├── CellKeyPressEvent {}
                ├── CellEditingStoppedEvent {
                        oldValue: any, // the old value before editing
                        newValue: any // the new value after editing
                      }
                └── CellValueChangedEvent {
                        oldValue: any, // the old value before editing
                        newValue: any // the new value after editing
                      }