I have integrated the ag-grid library into my project for data display. After editing a cell, I want to save the changes to the backend database by persisting the rowData. Most of the time, this process works smoothly, but occasionally I encounter an issue where an empty array gets serialized and persisted, for reasons unknown to me.
Currently, I am utilizing the onCellEditingStopped event to trigger the saving operation. Below is a snippet of code from my component:
this.plansGridOptions.onCellEditingStopped = this.cellEditingStopped;
cellEditingStopped(params: CellEditingStoppedEvent) {
let context = <ImportSessionComponent>params.context;
context.saveSession().subscribe(r => { });
}
saveSession(): Observable<any> {
//The row data array is serialized and saved
//However, sometimes plansRowData turns out to be empty here.
this.importForm.get("uploadItemsSerialized").setValue(JSON.stringify(this.plansRowData));
return this.importService.saveSession(this.importForm);
}
saveSession(sessionForm: FormGroup): Observable<any> {
//Converting strings to numbers for proper viewmodel binding in the backend
const value = {
...sessionForm.value, importType: +sessionForm.get("importType").value, environment:
+sessionForm.get("environment").value,
id: +sessionForm.get("id").value, version: +sessionForm.get("version").value, stepIndex:
sessionForm.get("currentStep").value
};
return this.http.post<any>("/import/save", value);
}
Below is the template markup for the grid:
<ag-grid-angular #planGrid style="width: 100%; height: 475px;"
class="ag-theme-balham-dark"
[rowData]="plansRowData"
[gridOptions]="plansGridOptions"
[columnDefs]="plansRowConfig">
</ag-grid-angular>
It appears that the synchronization between the grid component and the array in my component is not always consistent (i.e., the event I'm using is fired before the plansRowData array is updated). Should I consider using a different event to trigger the save functionality? What might be causing this inconsistency?