Batch edit rows locally. Flag changes, allow revert

Tracking edit changes in the grid, saving and restoring them

The following example shows a grid which will highlight edited rows, track the edited data in an object, then gives the option to either revert the edit, making the rows show the previous value or save the edited data into the grid.

The keys to make this example are the cellClassRules column definition, which is how we are able to highlight the edited rows, and the cellValueChanged grid event, which gives us access to the old and new values of an edited cell, allowing us to store and keep track of this data easily:

//cellClassRules is in the default colDef
cellClassRules: {
  'soft-edit':function(params){
    return Object.keys(rowDataTracker).indexOf (params.data.id)>-1;
  }
}

onCellValueChanged: function(params) {
  if(params.oldValue.toString()!== params.newValue.toString()){
    storeEdit (params.data.id, params.colDef.field, params.oldValue, params.newValue);
  }
gridOptions.api.refreshCells();
}

The above code is combined with the following (appropriately named) functions to achieve the desired functionality:

function storeEdit (rowId, columnId, oldValue, newValue){
 if(!rowDataTracker[rowId]){
  rowDataTracker[rowId] = {};
 }
 rowDataTracker[rowId][columnId] = [oldValue, newValue];
}

function confirmEditState() {
  rowDataTracker = {};
  gridOptions.api.refreshCells();
}

function cancelEdited() {
  gridOptions.api.forEachNode(function(node) {
    if(Object.keys(rowDataTracker).indexOf(node.id)>-1){
      let data = node.data;
      Object.keys(rowDataTracker[node.id]).forEach(function(key){
        data[key] = rowDataTracker[node.id][key][0];
      });
      node.updateData(data);
    }
   });
  confirmEditState();
}

The link to the example referenced throughout this article can be found below:

https://plnkr.co/edit/2NzZFcYyZc8fR7tA