Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Events

Below are listed all the events of the grid you can listen to. The events are asynchronously so that the state of the grid will be settled by the time your event callback gets invoked.

Events in ag-Grid became asynchronous in version 10.0.0. Before this, events were not asynchronous and you were not guaranteed the grid was finished before the event was fired. The new method of asynchronous events makes the grid work much better with systems designed around state and events, eg React.

Javascript

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

AngularJS 1.x

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

For AngularJS 1.x - 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.

Selection

cellClicked Cell is clicked.
cellDoubleClicked Cell is double clicked.
cellFocused Cell is focused.
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.
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.
itemsAdded Client added a new row.
itemsRemoved Client removed a row.

Sort & Filter

sortChanged Sort has changed, grid also listens for this and updates the model.
filterChanged Filter has changed, grid also listens for this and updates the model.

Columns

columnEverythingChanged Shotgun - gets called when either a) new columns are set or b) columnApi.setState() is used, so everything has changed.
rowGroupOpened A row group was opened or closed.
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).
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

Pagination

paginationReset Pagination service is reset.
paginationPageLoaded Pagination page load is finished.
paginationPageRequested Pagination page load is requested.

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 grid had to lay out again because it changed size.
modelUpdated Displayed rows have changed. Happens following sort, filter or tree expand / collapse events.
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.
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
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.