Grid Events

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

Mouse enters / leaves 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 cells value within a row has changed.

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.

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.

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.

The displayed page for pagination has changed. For example the data was filtered or sorted, or the user
has moved to a different page.

gridSizeChanged

The grid had to lay out again because it changed size.

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.

componentStateChanged

Only used by React, Angular 2+, Web Components, Aurelia 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.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →