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.

Selection

Editing

Sort and Filter

Row Drag and Drop

Columns

Miscellaneous

Event Properties and Hierarchy

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

//---------------------------------------------------------//
// Event hierarchy, and properties, for all ag-Grid events //
//---------------------------------------------------------//
└── AgEvent {
    │     type: string, // the event type, eg 'sortChanged' or 'columnResized'
    │   }
    └── AgGridEvent
        │     api: GridAPI, // see Grid API
        │     columnApi: 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
        │   │        flexColumns: Column[] // any columns resized due to flex
        │   │      }
        │   ├── 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 Context
            │     event?: 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 {}
                ├── CellKeyDown {}
                ├── CellKeyPress {}
                ├── CellEditingStoppedEvent {
                        oldValue: any, // the old value before editing
                        newValue: any // the new value after editing
                      }
                └── CellValueChangedEvent {
                        oldValue: any, // the old value before editing
                        newValue: any // the new value after editing
                      }