JavaScript Data GridSSRM - Single Row Updates

Version 36.2.0

Enterprise

This section demonstrates updating rows directly while using the Server-Side Row Model (SSRM).

Updating Rows API Copy Link

You can update a single row by using the row node updateData or setData functions.

Function

Updates the data on the rowNode. When this method is called, the grid refreshes the entire rendered row if it is displayed.

Function

Replaces the data on the rowNode. When this method is called, the grid refreshes the entire rendered row if it is displayed.

Setting row data will NOT change the row node ID, so if you are using getRowId() and the data changes such that the ID will be different, the rowNode will not have its ID updated.

Updating Rows Example Copy Link

The example below demonstrates a basic example, using the API's forEachNode function to iterate over all loaded nodes, and updating their version.

Set Data: Sets the row data using setData and the grid refreshes the row, notably the cells won't flash with enableCellChangeFlash.
Update Data: Updates the row data using updateData and the grid refreshes the row, notably the cells do flash with enableCellChangeFlash.

main.ts

import {
  ColDef,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IServerSideDatasource,
  ModuleRegistry,
  RowApiModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowApiModule,
  HighlightChangesModule,
  RowGroupingModule,
  ServerSideRowModelModule,
]);

let versionCounter: number = 0;
const columnDefs: ColDef[] = [
  { field: "athlete" },
  { field: "date" },
  { field: "country" },
  { field: "version" },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    sortable: false,
    enableCellChangeFlash: true,
  },
  columnDefs: columnDefs,
  // use the enterprise row model
  rowModelType: "serverSide",
  cacheBlockSize: 75,
};

function setRows() {
  versionCounter += 1;
  const version =
    versionCounter + " - " + versionCounter + " - " + versionCounter;
  gridApi!.forEachNode((node) => {
    node.setData({ ...node.data, version });
  });
}

function updateRows() {
  versionCounter += 1;
  const version =
    versionCounter + " - " + versionCounter + " - " + versionCounter;
  gridApi!.forEachNode((node) => {
    node.updateData({ ...node.data, version });
  });
}

const getServerSideDatasource = (server: any): IServerSideDatasource => {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);

      const response = server.getData(params.request);

      const dataWithVersion = response.rows.map((rowData: any) => {
        return {
          ...rowData,
          version:
            versionCounter + " - " + versionCounter + " - " + versionCounter,
        };
      });

      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: dataWithVersion,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 1000);
    },
  };
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    // setup the fake server with entire dataset
    const fakeServer = new FakeServer(data);

    // create datasource with a reference to the fake server
    const datasource = getServerSideDatasource(fakeServer);

    // register the datasource with the grid
    gridApi!.setGridOption("serverSideDatasource", datasource);
  });

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setRows = setRows;
  (<any>window).updateRows = updateRows;
}

Specific Row Updates Copy Link

The following code snippet outlines the general approach of iterating through all loaded row nodes and then updating target rows with rowNode.updateData(data):

api.forEachNode(rowNode => {
    if (idsToUpdate.indexOf(rowNode.data.id) >= 0) {
        // arbitrarily update some data
        const updated = rowNode.data;
        updated.gold += 1;

        // directly update data in rowNode
        rowNode.updateData(updated);
    }
});

The example below demonstrates this snippet in action;

main.ts

import {
  ColDef,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IServerSideDatasource,
  ModuleRegistry,
  RowApiModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowApiModule,
  HighlightChangesModule,
  RowGroupingModule,
  ServerSideRowModelModule,
]);

let versionCounter: number = 0;
const columnDefs: ColDef[] = [
  { field: "athlete" },
  { field: "date" },
  { field: "country" },
  { field: "version" },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    sortable: false,
    enableCellChangeFlash: true,
  },
  columnDefs,
  // use the enterprise row model
  rowModelType: "serverSide",
  cacheBlockSize: 75,
  getRowId: (params) => `${params.data.athlete}-${params.data.date}`,
};

function updateRows(athlete?: string, date?: string) {
  versionCounter += 1;
  gridApi!.forEachNode((rowNode) => {
    if (athlete != null && rowNode.data?.athlete !== athlete) {
      // if the athlete doesn't match, skip this row
      // Or row data is empty as it could be the loading row
      return;
    }

    if (date != null && rowNode.data?.date !== date) {
      return;
    }

    // arbitrarily update some data
    const updated = rowNode.data;
    updated.version =
      versionCounter + " - " + versionCounter + " - " + versionCounter;

    // directly update data in rowNode
    rowNode.updateData(updated);
  });
}

const getServerSideDatasource = (server: any): IServerSideDatasource => {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);

      const response = server.getData(params.request);

      const dataWithVersion = response.rows.map((rowData: any) => {
        return {
          ...rowData,
          version:
            versionCounter + " - " + versionCounter + " - " + versionCounter,
        };
      });

      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: dataWithVersion,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 1000);
    },
  };
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    // setup the fake server with entire dataset
    const fakeServer = new FakeServer(data);

    // create datasource with a reference to the fake server
    const datasource = getServerSideDatasource(fakeServer);

    // register the datasource with the grid
    gridApi!.setGridOption("serverSideDatasource", datasource);
  });

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).updateRows = updateRows;
}

Selected Row Updates Copy Link

The example below demonstrates how to update all of the rows which the user has selected, note the following:

The Update Selected Rows button will update the row version directly on the selected row nodes.
The selected nodes are obtained using api.getSelectedNodes(), and are then individually updated.

main.ts

import {
  ColDef,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IServerSideDatasource,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  HighlightChangesModule,
  RowGroupingModule,
  ServerSideRowModelModule,
]);

let versionCounter: number = 0;
const columnDefs: ColDef[] = [
  { field: "athlete" },
  { field: "country" },
  { field: "date" },
  { field: "version" },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    sortable: false,
    enableCellChangeFlash: true,
  },
  columnDefs: columnDefs,
  rowSelection: { mode: "multiRow", headerCheckbox: false },
  // use the enterprise row model
  rowModelType: "serverSide",
  cacheBlockSize: 75,
  getRowId: (params) => `${params.data.athlete}-${params.data.date}`,
};

const getServerSideDatasource = (server: any): IServerSideDatasource => {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);

      const response = server.getData(params.request);

      const dataWithVersion = response.rows.map((rowData: any) => {
        return {
          ...rowData,
          version:
            versionCounter + " - " + versionCounter + " - " + versionCounter,
        };
      });

      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: dataWithVersion,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 1000);
    },
  };
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    // setup the fake server with entire dataset
    const fakeServer = new FakeServer(data);

    // create datasource with a reference to the fake server
    const datasource = getServerSideDatasource(fakeServer);

    // register the datasource with the grid
    gridApi!.setGridOption("serverSideDatasource", datasource);
  });

function updateSelectedRows() {
  versionCounter += 1;
  const version =
    versionCounter + " - " + versionCounter + " - " + versionCounter;
  const nodesToUpdate = gridApi!.getSelectedNodes();
  nodesToUpdate.forEach((node) => {
    node.updateData({ ...node.data, version });
  });
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).updateSelectedRows = updateSelectedRows;
}

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridSSRM - Single Row Updates

Updating Rows API Copy Link

Updating Rows Example Copy Link

Specific Row Updates Copy Link

Selected Row Updates Copy Link