Expand All

  Getting Started



  Row Models




  Third Party


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


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.


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".


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.


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.


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


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


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.