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.


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.


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.


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.


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: <span class="event-properties">// all properties, including inherited, for CellValueChangedEvent</span> CellValueChangedEvent { type, api, columnApi, <span class="event-properties">// -> properties from AgEvent</span> node, data, rowIndex, rowPinned, context, event, <span class="event-properties">// -> properties from RowEvent</span> column, colDef, value, <span class="event-properties">// -> properties from CellEvent</span> oldValue, newValue <span class="event-properties">// -> properties from CellValueChangedEvent</span> }

// Event hierarchy, and properties, for all ag-Grid events //
└── AgEvent {
    │     type: string, // the event type, eg 'sortChanged' or 'columnResized'
    │   }
    └── AgGridEvent
        │     api: GridAPI, // see Grid APIcolumnApi: 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 Contextevent?: 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