Grid 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'
    │     api: GridAPI, // see Grid API
    │     columnApi: 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 Context
        │     event?: 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
                  }