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

Grid Events

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 Mouse enters / leaves cell.
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.
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.
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.
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.
modelUpdated Displayed rows have changed. Happens following sort, filter or tree expand / collapse events.
rowGroupOpened A row group was opened or closed.
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.
gridSizeChanged The grid had to lay out again because it changed size.
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.
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.

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'
    │     api: GridAPI, // see Grid APIcolumnApi: ColumnAPI // see Column API
    │   }
    ├── GridReadyEvent {}
    ├── SelectionChangedEvent {}
    ├── FilterChangedEvent {}
    ├── FilterModifiedEvent {}
    ├── SortChangedEvent {}
    ├── RowDataChangedEvent {}
    ├── RowDataUpdatedEvent {}
    ├── PinnedRowDataChangedEvent {}
    ├── NewColumnsLoadedEvent {}
    ├── GridColumnsChangedEvent {}
    ├── VirtualColumnsChangedEvent {}
    ├── ColumnPivotModeChangedEvent {}
    ├── ColumnEverythingChangedEvent {}
    ├── DisplayedColumnsChangedEvent {}
    ├── DragStartedEvent {}
    ├── DragStoppedEvent {}
    ├── 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)
    │     }
    ├── GridSizeChangedEvent {
    │       clientWidth: number, // new width in pixels of the grid
    │       clientHeight: number // new height in pixels of the grid
    │     }
    ├── ViewportChangedEvent {
    │       firstRow: number, // the index of the first rendered row
    │       lastRow: number // the index of the last rendered row
    │     }
    ├── 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
    │     }
    ├── ColumnEvent {
    │   │    column: Column, // the impacted column, only set if action was on one column
    │   │    columns: Column[] // list of all impacted columns
    │   │  }
    │   ├── 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 {}
            ├── CellDoubleClickedEvent {}
            ├── CellMouseOverEvent {}
            ├── CellMouseOutEvent {}
            ├── CellContextMenuEvent {}
            ├── CellEditingStartedEvent {}
            ├── CellEditingStoppedEvent {}
            └── CellValueChangedEvent {
                    oldValue: any, // the old value before editing
                    newValue: any // the new value after editing