Events

Below are listed all the events of the grid. Remember you can listen to events in the following ways:

Javascript and AngularJS 1.x

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler).

For Angular 1 - ag-Grid does not not fire events inside an Angular JS digest cycle. This is done on purpose for performance reasons, as there are many events fired, even if you don't listen to them. Firing the digest cycle for each one would kill performance. So you may want to $scope.$apply() after you handle the event.

React

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler). You can also register events using React props in your JSX eg eventName={this.myEventHandler.bind(this)}.

Angular

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler). You can also register events using Angular event binding eg (event-name)="myEventHandler".

VueJS

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler). You can also register events using VueJS event binding eg :event-name="myEventHandler".

Web Components

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler). You can also register events by calling domElement.addEventListener(eventName, handler) or placing an onXXX method directly onto the dom element - but remember the latter uses lower case event name and handler name to be consistent with how other DOM elements work.

Aurelia Components

Add the relevant onXXX() method to the gridOptions or register a method via api.addEventListener(eventName, handler). You can also register events by calling domElement.addEventListener(eventName, handler) or placing an onXXX method directly onto the dom element - but remember the latter uses lower case event name and handler name to be consistent with how other DOM elements work.

ag-Grid Events

Event Description
rowSelected Row is selected or deselected.
rowClicked Row is clicked.
rowDoubleClicked Row is double clicked.
cellClicked Cell is clicked.
cellDoubleClicked Cell is double clicked.
cellContextMenu Cell is right clicked.
cellFocused Cell is focused.
rowValueChanged A cells value within a row has changed.
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 cell being edited.
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 cell being edited.
cellEditingStarted Editing a cell has started.
cellEditingStopped Editing a cell has stopped.
modelUpdated Displayed rows have changed. Happens following sort, filter or tree expand / collapse events.
sortChanged
beforeSortChanged
afterSortChanged
sortChanged -> Sort has changed, grid also listens for this and updates the model.
beforeSortChanged -> Sort has changed, grid has not updated.
afterSortChanged -> Sort has changed, grid has updated.
filterChanged
beforeFilterChanged
afterFilterChanged
filterModified
filterChanged -> Filter has changed, grid also listens for this and updates the model.
beforeFilterChanged -> Filter has changed, grid has not updated.
afterFilterChanged -> Filter has changed, grid has updated.
filterModified -> Gets called when filter has been modified, but grid not informed. Useful when using an apply button inside the filter.
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.
selectionChanged Row selection is changed. Use the grid API to get the new row selected.
cellValueChanged Value has changed after editing.
gridSizeChanged The grid had to lay out again because it changed size.
rowGroupOpened A row group was opened or closed.
columnEverythingChanged Shotgun - gets called when either a) new columns are set or b) columnApi.setState() is used, so everything has changed.
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.
columnRowGroupChanged A row group column was added or removed.
columnValueChanged A value column was added or removed.
columnMoved A column was moved. To find out when the column move is finished you can use the dragStopped event below.
columnGroupOpened A column group was opened / closed.
virtualColumnsChanged The list of rendered columns has changed (only columns in the visible scrolled viewport are rendered by default).
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.
newColumnsLoaded User has set in new columns.
columnPivotModeChanged The pivot mode flag was changed
columnRowGroupChanged A row group column was added, removed or order changed.
columnPivotChanged A pivot column was added, removed or order changed.
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
rowDataChanged The client has set new data into the grid
floatingRowDataChanged The client has set new floating 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.
itemsAdded Client added a new row.
itemsRemoved Client removed a row.

ag-Grid Enterprise   The below events are available in the Enterprise version of ag-Grid.

Event Description
rangeSelectionChanged A change to range selection has occurred.