Updating Rows in AG Grid

Summary

AdapTable provides an updateGridData function to update rows in AG Grid
This can be run synchronously or asynchronously

AdapTable facilitates updating rows in AG Grid, while the application is live.

This is done via the updateGridData function in the Grid API section of Adaptable API.

Important

We strongly recommend using this function to update rows in AG Grid, rather than the AG Grid API directly
The function ultimately calls an AG Grid function but first performs important checks (e.g. for Primary Key)

This function can be run either synchronously or asynchronously, and should be used to update entire rows.

Hint

To update a single cell use setCellValue (or setCellValues for multiple cells) - see Updating Grid Cells for details

The updateGridData function does 2 things:

invokes AG Grid applyTransaction function (or applyTransactionAsync if called asynchronously)
publishes the Row Changed Event with a Trigger of Update, which will trigger Cell / Row Flashing and Alerts

Caution

AdapTable will not apply any Validation Alerts when using the updateGridData function

updateGridData

dataRows: any[], config?: DataUpdateConfig

Promise<RowNode[]>

Updates Rows in AG Grid (asynchronously if required)

Use this function to safely update data inside AG Grid while your application is live (asynchronously if required).

The signature of the function is:

updateGridData(dataRows: any[], config?: DataUpdateConfig): Promise<RowNode[]>;

As can be seen, it receives 2 arguments:

an array of data rows
an (optional) DataUpdateConfig object

and returns (via a Promise) the AG Grid RowNodes that were updated.

When invoked the function does some internal checks and validation and then calls one of these 2 AG Grid functions:

applyTransaction with param of update - if no async config was provided
applyTransactionAsync - if a config object with runAsync set to true was supplied

Note

If the Server-Side Row Model is being used, AdapTable calls applyServerSideTransaction[Async] instead

DataUpdateConfig

The DataUpdateConfig object is used to enable an asynchronous operation and to provide a callback if needed:

Property	Description
addIndex	Index where to add new rows
callback	Callback function invoked when a batch successfully concludes
flushAsync	Whether to flush async operations
runAsync	Whether row operation should happen asynchronously

Note

The flushAsync flag can be set to true even if runAsync is false
In other words, even if the current transaction is synchronous, this will still flush existing async transactions

// Set Price for Trade (of Id: 2) to 500
const node: IRowNode = adaptableApi.gridApi.getRowNodeForPrimaryKey(2);
const trade: ITrade = node.data;
trade.notional = 500;
adaptableApi.gridApi.updateGridData([trade]);

// Set Price for Trade (of Id: 2) to 500 asynchronously
const node: IRowNode = adaptableApi.gridApi.getRowNodeForPrimaryKey(2);
const trade: ITrade = node.data;
trade.notional = 500;
const config: DataUpdateConfig = {runAsync: true};
adaptableApi.gridApi.updateGridData([trade], config);

Updating Row Data

Fork Fork

This demo shows how to update rows in AG Grid at run-time using the updateGridData function in Grid API

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

export function updateReact(): WebFramework {
  return {
    id: 10270250,
    name: 'react',
    full_name: 'facebook/react',
    html_url: 'https://github.com/facebook/react',
    description:
      'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
    created_at: new Date('2013-05-24T16:15:54').toDateString(),
    updated_at: new Date(Date.now()).toDateString(),
    pushed_at: new Date('2021-12-19T14:34:59').toDateString(),
    homepage: 'https://reactjs.org',
    github_stars: 201548,
    language: 'JavaScript',
    forks_count: 36403,
    open_issues_count: 920,
    license: 'MIT License',
    topics: ['declarative', 'frontend', 'javascript', 'library', 'react', 'ui'],
    github_watchers: 6527,
    has_projects: true,
    has_wiki: true,
    has_pages: true,
    closed_issues_count: 10326,
    open_pr_count: 249,
    closed_pr_count: 11408,
    week_issue_change: 5,
  };
}

export function updateAngular(): WebFramework {
  return {
    id: 24195339,
    name: 'angular',
    full_name: 'angular/angular',
    html_url: 'https://github.com/angular/angular',
    description: 'The modern web developer’s platform',
    created_at: new Date('2014-09-18T16:12:01').toDateString(),
    updated_at: new Date(Date.now()).toDateString(),
    pushed_at: new Date('2021-12-19T21:54:01').toDateString(),
    homepage: 'https://angular.io',
    github_stars: 69651,
    language: 'TypeScript',
    forks_count: 20569,
    open_issues_count: 1889,
    license: 'MIT License',
    topics: [
      'angular',
      'javascript',
      'pwa',
      'typescript',
      'web',
      'web-framework',
      'web-performance',
    ],
    github_watchers: 5026,
    has_projects: true,
    has_wiki: false,
    has_pages: false,
    closed_issues_count: 21706,
    open_pr_count: 159,
    closed_pr_count: 20052,
    week_issue_change: 12,
  };
}

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Updating Grid Rows',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Update React',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const react: WebFramework = updateReact();
              const dataUpdateConfig: DataUpdateConfig = {
                runAsync: true,
                addIndex: 0,
              };
              context.adaptableApi.gridApi.updateGridData(
                [react],
                dataUpdateConfig
              );
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
            disabled: () => false,
          },
          {
            label: 'Update Angular',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const angular: WebFramework = updateAngular();
              const dataUpdateConfig: DataUpdateConfig = {
                runAsync: true,
              };
              context.adaptableApi.gridApi.updateGridData(
                [angular],
                dataUpdateConfig
              );
            },
            buttonStyle: {
              tone: 'warning',
              variant: 'text',
            },
            disabled: () => false,
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Dashboard: {
      PinnedToolbars: ['ButtonToolbar'],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'github_watchers',
            'updated_at',
            'license',
            'created_at',
            'has_wiki',
            '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,
          },
        },
      ],
    },
  },
};

Add or Update

AdapTable provides a companion addOrUpdateGridData function.

This should be used when the rows received can be either new or existing.

Find Out More

See using the addOrUpdateGridData function for more details

PreviousAdding Rows NextUpdating Cells

Framework: