Deleting Rows from AG Grid

Summary

AdapTable provides a deleteGridData function to delete rows in AG Grid
This can be run synchronously or asynchronously

AdapTable facilitates deleting rows from AG Grid, while the application is live.

This is done via the deleteGridData 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.

The deleteGridData function does 2 things:

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

deleteGridData

dataRows: any[], config?: DataUpdateConfig

Promise<RowNode[]>

Deletes Rows from AG Grid (asynchronously if required)

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

The signature of the function is:

deleteGridData(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 deleted.

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

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

// Delete first visible row from the Grid
const firstNode: IRowNode = adaptableApi.gridApi.getFirstDisplayedRowNode();
adaptableApi.gridApi.deleteGridData([firstNode.data]);

// Delete first visible row from the Grid asynchronously
const firstNode: IRowNode = adaptableApi.gridApi.getFirstDisplayedRowNode();
const config: DataUpdateConfig = {runAsync: true};
adaptableApi.gridApi.deleteGridData([firstNode.data], config);

Deleting Row Data

Fork Fork

This demo shows how to delete Rows from AG Grid at run-time using the deleteGridData function in Grid API

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Deleting Grid Rows',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Delete React',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const reactNode =
                context.adaptableApi.gridApi.getRowNodeForPrimaryKey(10270250);
              context.adaptableApi.gridApi.deleteGridData([reactNode]);
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
            disabled: () => false,
          },
          {
            label: 'Delete Vue',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const vueNode =
                context.adaptableApi.gridApi.getRowNodeForPrimaryKey(11730342);
              context.adaptableApi.gridApi.deleteGridData([vueNode]);
            },
            buttonStyle: {
              tone: 'warning',
              variant: 'text',
            },
            disabled: () => false,
          },
          {
            label: 'Delete HTML Rows',
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const gridApi: GridApi = context.adaptableApi.gridApi;
              const nodes = gridApi.getAllRowNodes().filter((n: IRowNode) => {
                return n.data['language'] == 'HTML';
              });
              context.adaptableApi.gridApi.deleteGridData(nodes);
            },
            buttonStyle: {
              tone: 'success',
              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,
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Cell_Any_Change',
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          Scope: {
            All: true,
          },
        },
      ],
    },
  },
};

PreviousUpdating Cells NextListening to Data Changes

Framework: