Grid Events

This is a list of the events that the grid raises. You can register callbacks for these events through the GridOptions interface.

The name of the callback is constructed by prefixing the event name with on. For example, the callback for the cellClicked event is gridOptions.onCellClicked.

TypeScript users can take advantage of the events' interfaces. You can construct the interface name by suffixing the event name with Event. For example, the cellClicked event uses the interface CellClickedEvent. See the Event Properties and Hierarchy section below to find out what properties each event has.

Selection

cellClickedCell is clicked.
cellDoubleClickedCell is double clicked.
cellFocusedCell is focused.
cellMouseOverMouse entered cell.
cellMouseOutMouse left cell.
cellMouseDownMouse down on cell.
rowClickedRow is clicked.
rowDoubleClickedRow is double clicked.
rowSelectedRow is selected or deselected.
selectionChangedRow selection is changed. Use the grid API to get the new row selected.
cellContextMenuCell is right clicked.
rangeSelectionChangedA change to range selection has occurred.

Editing

cellValueChangedValue has changed after editing.
rowValueChangedA cell's value within a row has changed. This event corresponds to Full Row Editing only.
cellEditingStartedEditing a cell has started.
cellEditingStoppedEditing a cell has stopped.
rowEditingStartedEditing 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 individual cell. This event corresponds to Full Row Editing only.
rowEditingStoppedEditing 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 individual cell. This event corresponds to Full Row Editing only.
pasteStartPaste operation has started. See Clipboard Events.
pasteEndPaste operation has ended. See Clipboard Events.

Sort and Filter

sortChangedSort has changed. The grid also listens for this and updates the model.
filterChangedFilter has been modified and applied.
filterModifiedFilter was modified but not applied. Used when filters have 'Apply' buttons.

Row Drag and Drop

rowDragEnterA drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid.
rowDragMoveThe mouse has moved while dragging.
rowDragLeaveThe mouse has left the grid while dragging.
rowDragEndThe drag has finished over the grid.

Columns

columnVisibleA column, or group of columns, was hidden / shown.
columnPinnedA column, or group of columns, was pinned / unpinned.
columnResizedA column was resized.
columnMovedA column was moved. To find out when the column move is finished you can use the dragStopped event below.
columnRowGroupChangedA row group column was added or removed.
columnValueChangedA value column was added or removed.
columnPivotModeChangedThe pivot mode flag was changed.
columnPivotChangedA pivot column was added, removed or order changed.
columnGroupOpenedA column group was opened / closed.
newColumnsLoadedUser set new columns.
gridColumnsChangedThe list of grid columns changed.
displayedColumnsChangedThe list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
virtualColumnsChangedThe list of rendered columns changed (only columns in the visible scrolled viewport are rendered by default).
columnEverythingChangedShotgun - gets called when either a) new columns are set or b) columnApi.setState() is used, so everything has changed.

Miscellaneous

gridReadyThe grid has initialised. The name 'ready' was influenced by the author's 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.
gridSizeChangedThe size of the grid div has changed. In other words, the grid was resized.
modelUpdatedDisplayed rows have changed. Triggered after sort, filter or tree expand / collapse events.
firstDataRenderedFired the first time data is rendered into the grid.
rowGroupOpenedA row group was opened or closed.
expandOrCollapseAllFired when calling either of the API methods expandAll() or collapseAll().
paginationChanged

Triggered every time the paging state changes. Some of the most common scenarios for this event to be triggered are:

  • The page size changes
  • The current shown page is changed
  • New data is loaded onto the grid
pinnedRowDataChangedThe client has set new pinned row data into the grid.
virtualRowRemovedA row was removed from the DOM, for any reason. Use to clean up resources (if any) used by the row.
viewportChangedWhich rows are rendered in the DOM has changed.
bodyScrollThe body was scrolled horizontally or vertically.
dragStartedWhen dragging starts. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.
dragStoppedWhen dragging stops. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.
rowDataChangedThe client has set new data into the grid using api.setRowData() or by changing the rowData bound property.
rowDataUpdatedThe client has updated data for the grid using api.applyTransaction(transaction) or by changing the rowData bound property with immutableData=true.
toolPanelVisibleChangedThe tool panel was hidden or shown. Use api.isToolPanelShowing() to get status.
componentStateChangedOnly 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.
animationQueueEmptyThe grid draws rows and cells using animation frames. This event gets fired when the animation frame queue is empty. Normally used in conjunction with api.isAnimationFrameQueueEmpty() so user can check if animation frame is pending, and if so 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, e.g. for sending to a printer.
cellKeyDownDOM event keyDown happened on a cell. See Keyboard Events.
cellKeyPressDOM event keyPress happened on a cell. See Keyboard Events.

Event Properties and Hierarchy

Below shows the event hierarchy and properties. All properties are inherited. For example the CellValueChangedEvent interface has the following properties:

interface CellValueChangedEvent { type, api, columnApi, // -> properties from AgEvent node, data, rowIndex, rowPinned, context, event, // -> properties from RowEvent column, colDef, value, // -> properties from CellEvent oldValue, newValue // -> properties from CellValueChangedEvent }
//---------------------------------------------------------//
// 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 {afterFloatingFilter: Column, // if filter was changed via floating filter
        │       afterDataChange: number, // if filter was changed as a result of data changing
        │     }
        ├── 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'}
                 target: HTMLElement, // The DOM element that started the event.
        │   │  }
        │   ├── 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. Also the node that started the drag when multi-row dragging.
        │   │    nodes: RowNode[], // The list of nodes being 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 event was due to browser event (eg click), this is browser event
            │   }
            ├── RowSelectedEvent {}
            ├── RowClickedEvent {}
            ├── RowDoubleClickedEvent {}
            ├── RowEditingStartedEvent {}
            ├── RowEditingStoppedEvent {}
            ├── RowGroupOpenedEvent {
            │     expanded: boolean // true if the group is expanded.
            }
            ├── 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
                      }