ag-grid cell editors - how to save data to backend

Question

Could you please help me with an example that shows saving data to backend service after editing 1/many cells in angular js? I found examples on how to write a custom cell editor and use ag grid's default cell editors but could not find how and where to plug in my code that saves edits to backend services?

Answer 1

There are two ways you can save your data on your Ag-Grid.

1) Get all data and send everything to the backend.

2) Get only the rows which you have changed, and send these rows to the backend. If you want to listen to specific changes to a particular row, you can make use of the onCellValueChanged event bindings when defining the ag-grid component on your component template. Basically, whenever the cell has any changes, the entire row will be 'marked' as modified (assign the custom property modified to true).

When you need to send the modified rows to your backend, you get all row data, and filter out the rows whereby the 'modified' property is equals to true.

Do initialise Ag-grid's params api on your component.

The below code is for #2 since that is what you are seeking.

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

and on your component.ts, the onRowValueChanged method will be fired every time you make any changes

export class YourComponent {
  private gridApi;
  private gridColumnApi;
   .
   . 
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

  onCellValueChanged(event) {
    //console.log(event) to test it
    event.data.modified = true;
  }

  saveModifiedRows() {
    const allRowData = [];
    this.gridApi.forEachNode(node => allRowData.push(node.data));
    const modifiedRows = allRowData.filter(row => row['modified']);
    // add API call to save modified rows

  }