Managing Rows in AG Grid

Summary

AdapTable provides a useful manageGridData function
This enables adding, updating and deleting AG Grid Rows in one transaction
This function can be run synchronously or asynchronously

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

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

Important

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

This function can be run either synchronously or asynchronously as required.

Find Out More

AdapTable also provides standalone functions if you wish only to add, update or delete Grid Rows, see:

The manageGridData function does 2 things:

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

manageGridData

rowConfig, updateConfig

Promise<RowNode[]>

Manages (ie. adds, updates or deletes) AG Grid Rows (asynchronously if required)

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

The signature of the function is:

manageGridData(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
    addedRows: IRowNode[];
    updatedRows: IRowNode[];
    removedRows: IRowNode[];
  }>;

As can be seen, it receives 2 arguments:

a DataRowConfig object
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 the appropriate param - 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

DataRowConfig

The DataRowConfig object is used to provide the rows which need to be added, updated or deleted:

Property	Description
addRows	Rows to add
deleteRows	Rows to delete
updateRows	Rows to update

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

// Create 2 new Rows to add to the Grid
const python: WebFramework = createPython();
const go: WebFramework = createGo();
// Update 2 existing rows in the Grid
const react: WebFramework = updateReact();
const angular: WebFramework = updateAngular();
// Retrieve 2 rows which should be deleted
const vueNode = gridApi.getRowNodeForPrimaryKey(11730342);
const svelteNode = gridApi.getRowNodeForPrimaryKey(74293321);
// Create Config Object with all 6 rows (2 add, 2 update and 2 delete)
const dataRowConfig: DataRowConfig = {
    addRows: [python, go],
    updateRows: [react, angular],
    deleteRows: [vueNode, svelteNode],
};
// Create a DataUpdate Config object to enable running asynchronously
const dataUpdateConfig: DataUpdateConfig = {
  runAsync: true,
  addIndex: 0,
};
// Call the manageGridData function to make all changes in one transaction
gridApi.manageGridData(dataRowConfig, dataUpdateConfig);

Managing Row Data

Fork Fork

This demo shows how to manage rows in AG Grid at run-time using the manageGridData function in Grid API
Clicking the 'Manage Rows' will create a single transaction that simultaneously:
- adds 2 Rows (Python and Go)
- updates 2 Rows (React and Angular)
- deletes 2 Rows (Vue and Svelte)

import {
  AdaptableButton,
  AdaptableOptions,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  DataRowConfig,
  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 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: 'Adding Grid Rows',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Manage Rows',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              
              const gridApi = context.adaptableApi.gridApi;
              const python: WebFramework = createPython();
              const go: WebFramework = createGo();
              const react: WebFramework = updateReact();
              const angular: WebFramework = updateAngular();
              const vueNode = gridApi.getRowNodeForPrimaryKey(11730342);
              const svelteNode = gridApi.getRowNodeForPrimaryKey(74293321);
              const dataRowConfig: DataRowConfig = {
                  addRows: [python, go],
                  updateRows: [react, angular],
                  deleteRows: [vueNode, svelteNode],
              };
              const dataUpdateConfig: DataUpdateConfig = {
                runAsync: true,
                addIndex: 0,
              };
              gridApi.manageGridData(dataRowConfig, dataUpdateConfig);
            },
            buttonStyle: {
              tone: 'info',
              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,
          },
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Cell_Any_Change',
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          Scope: {
            All: true,
          },
        },
      ],
    },
  },
};

PreviousLoading Data NextAdding Rows

Framework: