Server-Side Row Model - Managing Data

Summary

AG Grid rows can be added, updated and deleted through AdapTable API methods when using the Server-Side Row Model
These functions will, in turn, invoke the relevant AG Grid functions

The Server-Side Row Model adds and updates rows using the same Grid API row management functions as when using the Client Side Row Model, namely:

addGridData – to add Grid Rows
updateGridData - to update Grid Rows
deleteGridData - to delete Grid Rows

AdapTable, in turn, invokes the AG Grid applyServerSideTransaction or applyServerSideTransactionAsync functions as appropriate.

Note

You can also use the setCellValue and setCellValues in Grid API to update individual cells, but this is rarely done

Updating Rows

SSRM - Updating Rows

Fork Fork

This demo includes a Custom Dashboard Toolbar with 2 Buttons that call Grid API methods:
- Update First Row - updates the first row using updateGridData
- Update Second Row - updates Gold and Bronze columns in second row using setCallValue
We leverage Cell Flashing to make it easy to see which cells have changed

import {
  AdaptableButton,
  AdaptableOptions,
  CellUpdateRequest,
  CustomToolbarButtonContext,
  DataUpdateConfig,
} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM Update Row Data',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'actions',
        title: 'Actions',
        toolbarButtons: [
          {
            label: 'Update First Row',
            buttonStyle: {
              tone: 'none',
              variant: 'outlined',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const firstnode =
                context.adaptableApi.gridApi.getFirstDisplayedRowNode();
              if (firstnode) {
                const pk =
                  context.adaptableApi.gridApi.getPrimaryKeyValueForRowNode(
                    firstnode
                  );
                const firstRow = {
                  age: 23,
                  athlete: 'Michael Phelps',
                  bronze: 0,
                  country: 'United States',
                  country_group: 'U',
                  date: '24/08/2008',
                  gold: 7,
                  id: pk,
                  silver: 3,
                  sport: 'Swimming',
                  total: 8,
                  year: 2008,
                };
                const config: DataUpdateConfig = {
                  runAsync: true,
                };
                context.adaptableApi.gridApi.updateGridData([firstRow], config);
              }
            },
          },
          {
            label: 'Update Second Row',
            buttonStyle: {
              tone: 'none',
              variant: 'outlined',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const secondNode =
                context.adaptableApi.gridApi.getRowNodeForIndex(1);
              if (secondNode) {
                const pk =
                  context.adaptableApi.gridApi.getPrimaryKeyValueForRowNode(
                    secondNode
                  );

                const cellUpdateRequestGold: CellUpdateRequest = {
                  primaryKeyValue: pk,
                  newValue: 5,
                  columnId: 'gold',
                };
                const cellUpdateRequestBronze: CellUpdateRequest = {
                  primaryKeyValue: pk,
                  newValue: 3,
                  columnId: 'bronze',
                };
                context.adaptableApi.gridApi.setCellValues([
                  cellUpdateRequestGold,
                  cellUpdateRequestBronze,
                ]);
              }
            },
          },
        ],
      },
    ],
  },

  initialState: {
    Dashboard: {
      PinnedToolbars: ['actions'],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'athlete',
            'gold',
            'silver',
            'bronze',
            'country',
            'sport',
            'year',
          ],
          ColumnSizing: {
            athlete: {Width: 175},
            bronze: {Width: 100},
            country: {Width: 125},
            gold: {Width: 100},
            silver: {Width: 100},
            sport: {Width: 175},
            year: {Width: 115},
          },
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-numeric-anyChange',
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
        },
      ],
    },
  },
};

Adding Rows

The addGridData function in Grid API will add new Rows to the Grid while using the Server-Side Row Model.

Hint

When adding data, include the addIndex property in the DataUpdateConfig object if the new row should be visible

SSRM - Adding Rows

Fork Fork

This demo includes a Custom Dashboard Toolbar with a Button which adds a new row at the top of the grid
We added a ROW_ADDED Observable Alert to tell the user the row was inserted

import {
  AdaptableButton,
  AdaptableOptions,
  CustomToolbarButtonContext,
  DataUpdateConfig,
} from '@adaptabletools/adaptable';

const newRowUId: string = 'xy254878-4c38-4624-98ba-67be41a3ca3a';
export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM Add Row Data',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'actions',
        title: 'Actions',
        toolbarButtons: [
          {
            label: 'Add Row',
            buttonStyle: {
              tone: 'none',
              variant: 'outlined',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const newRow = {
                age: 55,
                athlete: 'John Smith',
                bronze: 0,
                country: 'United States',
                country_group: 'U',
                date: '24/08/2008',
                gold: 9,
                id: newRowUId,
                silver: 5,
                sport: 'Swimming',
                total: 8,
                year: 2008,
              };
              const config: DataUpdateConfig = {
                addIndex: 0,
                runAsync: true,
              };
              context.adaptableApi.gridApi.addGridData([newRow], config);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      PinnedToolbars: ['actions', 'Alert'],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'athlete',
            'gold',
            'silver',
            'bronze',
            'country',
            'sport',
            'year',
          ],
          ColumnSizing: {
            athlete: {Width: 175},
            bronze: {Width: 100},
            country: {Width: 125},
            gold: {Width: 100},
            silver: {Width: 100},
            sport: {Width: 175},
            year: {Width: 115},
          },
        },
      ],
    },
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-Success-69',
          Rule: {
            ObservableExpression: 'ROW_ADDED()',
          },
          MessageType: 'Success',
          MessageHeader: 'You added a row',
          Scope: {
            All: true,
          },
          AlertProperties: {
            DisplayNotification: true,
            HighlightRow: {
              BackColor: 'Purple',
              ForeColor: 'White',
            },
          },
        },
      ],
    },
  },
};

PreviousRow Grouping NextFormatting & Styling

Framework: