Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: SSRM Transactions

SSRM Transaction Updates allow large numbers of rows in the grid to be added, removed or updated in an efficient manner.

Transactions for the Server Side Row Model (SSRM) work similarly to Client Side Row Model Transactions. The APIs are almost identical, but there are some important differences (such as the SSRM requiring a 'route') and as such the APIs are not shared.

Applying a SSRM transaction is done using the grid API applyServerSideTransaction(params). Here are some introductory code snippets demonstrating how to use the API:

// Add 1 row at the top level group
    add: [
        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' }

// Remove 1 row under the group 'Ireland', '2002'
    route: ['Ireland','2002'],
    remove: [
        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' }

// Add, remove and update a bunch of rows under 'United Kingdom'
    route: ['United Kingdom'],
    add: [
        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' },
        { id: 25, name: 'Jillian Crosby', status: 'Alive and kicking' }
    update: [
        { id: 26, name: 'Kevin Flannagan', status: 'Alive and kicking' },
        { id: 27, name: 'Tony Smith', status: 'Alive and kicking' }
    remove: [
        { id: 28, name: 'Andrew Connel', status: 'Alive and kicking' },
        { id: 29, name: 'Bricker McGee', status: 'Alive and kicking' }

Here is a basic example with no grouping and a small dataset.

Transaction API

The signature of the grid API applyServerSideTransaction(params) is as follows:

Apply transactions to the server side row model.
applyServerSideTransaction = (
    transaction: ServerSideTransaction
) => ServerSideTransactionResult | undefined;

interface ServerSideTransaction {
  // The Row Store to apply the transaction to, ie what group level.
  // eg ['Ireland','2002'] to update the child store found after expanding Ireland and 2002 groups.
  // Passing in blank to empty applies the transaction to the top level. 
  route?: string[];
  // Index position to add at. If missing, rows will be added to the end. 
  addIndex?: number;
  // Rows to add 
  add?: any[];
  // Rows to remove 
  remove?: any[];
  // Rows to update 
  update?: any[];

interface ServerSideTransactionResult {
  // The status of applying the transaction. 
  status: ServerSideTransactionResultStatus;
  // If rows were added, the newly created Row Nodes for those rows. 
  add?: RowNode[];
  // If rows were removed, the deleted Row Nodes. 
  remove?: RowNode[];
  // If rows were updated, the updated Row Nodes. 
  update?: RowNode[];

enum ServerSideTransactionResultStatus {
  // Transaction was successfully applied 
  Applied = 'Applied'
  // Store was not found, transaction not applied.
  // Either invalid route, or the parent row has not yet been expanded. 
  StoreNotFound = 'StoreNotFound'
  // Store is loading, transaction not applied. 
  StoreLoading = 'StoreLoading'
  // Store is loading (as max loads exceeded), transaction not applied. 
  StoreWaitingToLoad = 'StoreWaitingToLoad'
  // Store load attempt failed, transaction not applied. 
  StoreLoadingFailed = 'StoreLoadingFailed'
  // Store is type Partial, which doesn't accept transactions 
  StoreWrongType = 'StoreWrongType'
  // Transaction was cancelled, due to grid.
  // Callback isApplyServerSideTransaction() returning false 
  Cancelled = 'Cancelled'

Matching Rows

In order for the grid to find rows to update and remove, it needs a way to identify these rows.

If the grid callback getRowId is provided, the grid will match on row ID.

If the grid callback getRowId is not provided, the grid will match on object reference.

Allows setting the ID for a particular row node based on the data.
getRowId: GetRowIdFunc<TData>;

interface GetRowIdFunc<TData = any> {
    (params: GetRowIdParams<TData>) : string

interface GetRowIdParams<TData = any> {
  // The data item provided to the grid for the row in question 
  data: TData;
  // If grouping, the level, ie how many levels from the top. Used by ServerSide Row Model only 
  level: number;
  // If grouping, provides the keys of the parent groups. Used by ServerSide Row Model only 
  parentKeys?: string[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;

Targeting Groups

When updating grouped data, a transaction needs to be targeted against the group. This is done by using the transaction's route attribute.

If you require to update more than one group, then a transaction needs to be applied for each individual group to update.

The example below demonstrates applying transactions to groups. Note the following:

  • The buttons New Palm Oil and New Rubber will add one row to each group accordingly and print the result to the console. The group must be open for the add to happen.
  • The button New Wool & Amber will add one item to each group. Note that two transactions are require to achieve this, one for each group, and print the results to the console. The groups must be open for the add to happen.
  • The button New Product will attempt to add an item to the top level, however it will fail as the top level has been configured to use Infinite Scroll.
  • The button Group State will print to the console the state of the existing groups.

Infinite Scroll

Transaction Updates do not work for Infinite Scroll. Instead either move your application to not use Infinite Scroll or Refresh to have the grid data update.

Next Up

Continue to the next section to learn how to perform High Frequency Updates.