Listening to Cell and Row Changes

Summary

AdapTable provides 2 Events useful for managing Grid Data Changes
- Row Changed Event - fires whenever data is loaded, added, updated or removed
- Cell Changed Event - fires when the contents of a cell changes

Row Changed Event

AdapTable's Row Changed Event fires whenever Rows are loaded, added, updated or deleted in AG Grid.

Caution

This event is only fired if the change is made via the Managing Grid Data functions in AdapTable's Grid API
Or if a Create, Clone, Edit or Delete Action Column Command is used

Deep Dive

Understanding the Row Changed Event

RowChangedInfo

The event provides the RowChangedInfo object which contains a single rowDataChange property:

Property	Description
rowDataChange	Object providing full information of the Row that changed
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

This property is of type RowDataChangedInfo and is defined as follows:

Property	Description
changedAt	Timestamp of change occurrence (in milliseconds)
dataRows	Data rows that have been added, updated, or deleted
rowNodes	Row Nodes that were affected by this change
rowTrigger	Trigger for row change: Load, Add, Update, or Delete

The rowTrigger property has 4 values, each triggered by a different Grid API function:

Trigger	Grid API function
Load	`loadGridData`
Add	`addGridData`
Update	`updateGridData`
Delete	`deleteGridData`

Event Subscription

Subscribing to the Event is done the same way as with all Adaptable Events:

api.eventApi.on('RowChanged', (eventInfo: RowChangedInfo) => {
    // do something with the info
});

Row Changed Events

Fork Fork

This demo listens to the Row Changed Event and outputs a System Status Message (each with a different type)

Try It Out

Click the Load Initial Grid Data Dashboard Button to load data and trigger a Row Change of Load
Click the Add Action Column Command in any Row to add a Row and trigger a Row Change of Add
Click the Edit Action Column Command in any Row to update a Row and trigger a Row Change of Update
Click the Delete Action Column Command in any Row to delete a Row and trigger a Row Change of Delete

import {
  AdaptableButton,
  AdaptableColumn,
  AdaptableOptions,
  DashboardButtonContext,
  RowFormColumnContext,
} from '@adaptabletools/adaptable';
import {WebFramework, rowData} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Changed Event',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'create',
          },
          {
            command: 'edit',
          },
          {command: 'delete'},
        ],
      },
    ],
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Load Initial Grid Data',
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          const jsRows: WebFramework[] = rowData.filter(
            (f: WebFramework) => f.language === 'JavaScript'
          );
          context.adaptableApi.gridApi.loadGridData(jsRows);
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'warning',
        },
        disabled: () => false,
      },
    ],
  },
  rowFormOptions: {
    setPrimaryKeyValue: context => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
    includeColumnInRowForm: (rowFormColumnContext: RowFormColumnContext) => {
      const column: AdaptableColumn = rowFormColumnContext.adaptableColumn;
      return column.columnTypes?.includes('actionColumn') ||
        column.columnId == 'id'
        ? false
        : true;
    },
  },

  initialState: {
    Dashboard: {
      PinnedToolbars: ['SystemStatus'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'action',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'topics',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Cell Changed Event

The Cell Changed Event fires whenever the contents of any cell changes in AG Grid.

This can be the result of a user cell edit or of ticking data.

Deep Dive

Understanding the Cell Changed Event

CellChangedInfo

The event provides the CellChangedInfo object which contains a single cellDataChange property:

Property	Description
cellDataChange	Object providing full information of the cell (and column and row) that changed
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

This property is of type CellDataChangedInfo and is defined as follows:

Property	Description
changedAt	Timestamp of change occurrence (in milliseconds)
column	Column in which cell is situated
newValue	New value for the cell
oldValue	Value in the Cell before the edit
primaryKeyValue	Primary Key Column's value for the row where edited cell is situated
rowData	Data in the Row
rowNode	AG Grid RowNode that contains the cell
trigger	What triggered the change - user, background change or a reverted change?

Event Subscription

Subscribing to the Event is done the same way as with all Adaptable Events:

api.eventApi.on('CellChanged', (eventInfo: CellChangedInfo) => {
    // do something with the info
});

Cell Changed Event

Fork Fork

This demo listens to the Cell Changed Event and outputs a System Status Message for the Cell's new value
Note: We use the Grid API to select a cell in the Github Stars Column

Try It Out

Apply the Smart Edit on the selected cell to update the Cell and trigger a Cell Changed Event

PreviousDeleting Rows NextTechnical Reference