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: // all properties, including inherited, for CellValueChangedEvent 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, // 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
                      }