Server-side CRUD Operations

Learn how to perform CRUD operations using the Server-side Row Model.

Server-side Changing Data

Data is read back from the server side in blocks. This is similar to paging in other data-grids. This comes with one restriction - if the data is changing such that the data in each block changes, then the Server-side row model will get the incorrect rows. For example consider the following scenario:

  1. The grid asks for rows 0 to 99 (ie first block of 100 rows) and these get read from a database.
  2. Another application inserts a row at index 50.
  3. The grid asks for rows 100 to 199 (the second block of 100 rows) and again these get read from the database.
In this scenario the grid will have the last row in the first block appear again as the first row in the second block. This is because the row was at index 99 before the insert and then at index 100 after the insert.

For this reason it is best use Server-side row model on data that is not changing, or a snapshot of the data.

Updating Row Data

It's possible to directly update row data without having to fetch data from the server.

The following code snippet outlines the general approach; iterate through all loaded row nodes and then update them directly using rowNode.setData(data):

gridOptions.api.forEachNode(function(rowNode) { if (idsToUpdate.indexOf(rowNode.data.id) >= 0) { // arbitrarily update some data var updated = rowNode.data; updated.gold += 1; // directly update data in rowNode rowNode.setData(updated); } }); Setting row data will NOT change the row node ID - so if using getRowNodeId() and the data changes such that the ID will be different, the rowNode will not have it's ID updated.

The example below shows this in action where the following can be noted:

  • Update Selected Rows - will update the medal count directly on the row nodes and then invoke the mock server with the updated rows.
  • Purge Caches - will clear all loaded data and force a reload. Notice that the previously updatad data will be returned from the server.

CRUD

The Server-side Row Model acts as a cache against the original store of data which typically resides on the server-side of an application. To add or remove records, the pattern is to update the original data set (typically on the server) and then get the Server-side Row Model to refresh.

The example below shows this in action where the following can be noted:

  • The Add Row will add a row before the currently selected row.
  • The Remove Row will remove the currently selected row.
  • All operations are done outside of the grid and the grid is then told to refresh.