Adding Rows to AG Grid

Summary

AdapTable provides an addGridData function to add rows to AG Grid
This can be run synchronously or asynchronously

AdapTable facilitates adding rows to AG Grid, while the application is live.

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

Important

We strongly recommend using this function to add rows to 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 as required.

Hint

There is an option to configure where in the Grid the row will be added

The addGridData function does 2 things:

invokes AG Grid applyTransaction function (or applyTransactionAsync if called asynchronously)
publishes the Row Changed Event with a Trigger of Add (which will in turn trigger any Alerts)

addGridData

dataRows: any[], config?: DataUpdateConfig

Promise<RowNode[]>

Adds new Rows to AG Grid (asynchronously if required)

Use this function to add any rows to AG Grid while your application is live (asynchronously if required).

The signature of the function is:

addGridData(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 added.

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

applyTransaction with param of add - 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

Caution

Make sure all mandatory fields are included in the DataRow(s) provided, and that the Primary Key is unique

// Add a new Trade to the Grid
const trade: ITrade = getTradeFromServer();
adaptableApi.gridApi.addGridData([trade]);

// Add a new Trade to AG Grid asynchronously
const trade: ITrade = getTradeFromServer();
const config: DataUpdateConfig = {runAsync: true};
adaptableApi.gridApi.addGridData([trade], config);

addIndex

The addIndex config property can be used, if required, to specify where in AG Grid the new rows should be added

// Add a new Trade to the top of the Grid
const trade: ITrade = getTradeFromServer();
const config: DataUpdateConfig = {addIndex: 0};
adaptableApi.gridApi.addGridData([trade], config);

Adding Row Data

Fork Fork

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

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

export function createPython(): WebFramework {
  return {
    id: Math.floor(Math.random() * (1000000 - 5000 + 1) + 200000),
    name: 'python',
    description: 'A very popular language.',
    created_at: new Date().toDateString(),
    updated_at: new Date().toDateString(),
    pushed_at: new Date().toDateString(),
    github_stars: 5000,
    language: 'Python',
    open_issues_count: 750,
    license: 'MIT License',
    github_watchers: 6671,
    topics: ['duck typing', 'proxies', 'prerformance', 'solid'],
    has_projects: true,
    has_wiki: true,
    has_pages: false,
    closed_issues_count: 12326,
    open_pr_count: 749,
    closed_pr_count: 1708,
    week_issue_change: 15,
  };
}

export function createGo(): WebFramework {
  return {
    id: Math.floor(Math.random() * (1000000 - 5000 + 1) + 200000),
    name: 'go',
    description: 'A very popular language.',
    created_at: new Date().toDateString(),
    updated_at: new Date().toDateString(),
    pushed_at: new Date().toDateString(),
    github_stars: 3850,
    language: 'Go',
    open_issues_count: 837,
    license: 'BSD 3-Clause',
    github_watchers: 9852,
    topics: ['open sournce', 'similar to C'],
    has_projects: true,
    has_wiki: true,
    has_pages: false,
    closed_issues_count: 10254,
    open_pr_count: 985,
    closed_pr_count: 2014,
    week_issue_change: 65,
  };
}

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adding Grid Rows',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Add Python Row to Top',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const python: WebFramework = createPython();
              const dataUpdateConfig: DataUpdateConfig = {
                runAsync: true,
                addIndex: 0,
              };
              context.adaptableApi.gridApi.addGridData(
                [python],
                dataUpdateConfig
              );
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
            disabled: () => false,
          },
          {
            label: 'Add Go Row',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const go: WebFramework = createGo();
              const dataUpdateConfig: DataUpdateConfig = {
                runAsync: true,
              };
              context.adaptableApi.gridApi.addGridData([go], 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',
            '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,
        },
      ],
    },
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-row-added',
          Rule: {
            ObservableExpression: 'ROW_ADDED()',
          },
          MessageType: 'Success',
          Scope: {
            All: true,
          },
          AlertProperties: {
            HighlightRow: true,
          },
        },
      ],
    },
  },
};

Add or Update

AdapTable provides a companion addOrUpdateGridData function.

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

If the primary key exists in a row, the function will call updateGridData (see Updating Grid Rows)

If the primary key doesn't exist in a row, the function will call addGridData.

addOrUpdateGridData

dataRows: any[], config?: DataUpdateConfig

Promise<RowNode[]>

Adds or Updates Rows in AG Grid (asynchronously if required)

Use this function to safely add or update data inside AG Grid while your application is live.

The function checks whether the Primary Key value exists and then:

Sends all existing rows to updateGridData
Sends all new rows to addGridData

// Add a new Trade to the Grid
const newTrade: ITrade = getTradeFromServer();
// Set Price for Trade (of Id: 2) to 500
const existingTrade: ITrade =
  adaptableApi.gridApi.getRowNodeForPrimaryKey(2).data;
existingTrade.notional = 500;
adaptableApi.gridApi.addOrUpdateGridData([newTrade, existingTrade]);

PreviousManaging Rows NextUpdating Rows

Framework: