Updating Grid Cells

Summary

AdapTable provides 2 methods in Grid API used to set specific cell values

The Grid API section of Adaptable API contains 2 functions for when just particular cells, rather than a whole row, needs to be updated.

Find Out More

See Updating Grid Rows for instructions on how to update entire rows
See the Editing Data section for details on the many AdapTable Modules that support data entry and editing

setCellValue - updates a single Cell in the Grid
setCellValues - calls setCellValue in a loop

Many Modules in AdapTable react to this function being invoked, including:

causing Cell or Row Flashing if configured
triggering any Data Change Alerts and apply any Validation Alerts
firing the Cell Changed Event
populating the Data Change History Monitor with details of the edit

Note

These functions are used by AdapTable for cell edits triggered by Smart Edit, Bulk Update, Shortcuts or Plus Minus

setCellValue

void

Update a Single Cell in AG Grid

Use this function to update just once Cell in AG Grid.

The function signature is as follows:

setCellValue(cellUpdateRequest: CellUpdateRequest): void;

As can be seen it is a void function that receives a CellUpdateRequest object defined as follows:

Property	Description
columnId	Id of Column in which edited cell is situated
newValue	New Value for the cell
primaryKeyValue	Primary Key column's value in row - how Adaptable locates the cell
rowNode	AG Grid Row Node that contains the cell (optional)

// Get the node to update
const rowNode: RowNode = context.rowNode

// Get Primary Key Value
const primaryKeyValue = adaptableApi.gridApi.getPrimaryKeyValueForRowNode(rowNode)

// Increment the Github Stars column in the row
const cellUpdateRequest: CellUpdateRequest = {
  columnId: 'github_stars',
  newValue: rowNode.data.github_stars + increment,
  primaryKeyValue: primaryKeyValue,
  rowNode: rowNode,
};
adaptableApi.gridApi.setCellValue(cellUpdateRequest);

Setting Cell Values

Fork Fork

This demo provides examples of updating individual Cell Values via the setCellValue function in Grid API (using 3 Custom Toolbar Buttons):
- First button updates Language in first row to Python
- Second button increments the Github Stars value in the second row
- Third button changes all rows that have a License of 'Other' to 'Unknown License' (using the setCellValues function)

Try It Out

Click the 3 buttons in turn to see the cell changes made (we turned on Cell Flashing to make it easier to see)
Open the Data Change History Monitor to see a record of the changes

import {
  AdaptableButton,
  AdaptableOptions,
  CellUpdateRequest,
  CustomToolbarButtonContext,
  GridApi,
} from '@adaptabletools/adaptable';
import {IRowNode} from 'ag-grid-enterprise';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Setting Cell Values',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Set Lang to Python (1st Row)',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              // Get handle to Grid APi
              const gridApi: GridApi = context.adaptableApi.gridApi;
              // Get the first Row Node
              const firstNode = gridApi.getFirstRowNode();
              if (firstNode) {
                const cellUpdateRequest: CellUpdateRequest = {
                  columnId: 'language',
                  newValue: 'Python',
                  primaryKeyValue:
                    gridApi.getPrimaryKeyValueForRowNode(firstNode),
                  rowNode: firstNode,
                };
                gridApi.setCellValue(cellUpdateRequest);
              }
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
          {
            label: 'Increment Stars (2nd Row)',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              // Get handle to Grid APi
              const gridApi: GridApi = context.adaptableApi.gridApi;
              // Get the second Row Node
              const secondNode = gridApi.getRowNodeForIndex(1);
              if (secondNode) {
                const starsColumnId = 'github_stars';
                const currentStarsValue: number =
                  gridApi.getNormalisedValueFromRowNode(
                    secondNode,
                    starsColumnId
                  );

                const cellUpdateRequest: CellUpdateRequest = {
                  columnId: starsColumnId,
                  newValue: currentStarsValue + 1,
                  primaryKeyValue:
                    gridApi.getPrimaryKeyValueForRowNode(secondNode),
                  rowNode: secondNode,
                };
                gridApi.setCellValue(cellUpdateRequest);
              }
            },
            buttonStyle: {
              tone: 'success',
              variant: 'text',
            },
          },
          {
            label: 'Update "Other" Licences (2 Rows)',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const gridApi: GridApi = context.adaptableApi.gridApi;
              const licenseColumnId = 'license';
              const nodes = gridApi.getAllRowNodes().filter((n: IRowNode) => {
                return n.data['license'] == 'Other';
              });
              let cellUpdateRequests: CellUpdateRequest[] = [];
              nodes.forEach((node: IRowNode) => {
                cellUpdateRequests.push({
                  columnId: licenseColumnId,
                  newValue: 'Unknown License',
                  primaryKeyValue: gridApi.getPrimaryKeyValueForRowNode(node),
                  rowNode: node,
                });
              });
              gridApi.setCellValues(cellUpdateRequests);
            },
            buttonStyle: {
              tone: 'warning',
              variant: 'text',
            },
          },
        ],
      },
    ],
  },
  dataChangeHistoryOptions: {
    activeByDefault: true,
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ButtonToolbar', 'DataChangeHistory'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'github_watchers',
            'updated_at',
            'pushed_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Cell_Any_Change',
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          Scope: {
            All: true,
          },
        },
      ],
    },
  },
};

PreviousUpdating Rows NextDeleting Rows

Framework: