Data persistence in ag-grid Angular

Question

I have built two grids Grid_A and Grid_B which both contain a column called "Activite".
When the user edits this column cells in Grid_A, the same values get displayed in this column in Grid_B I have made this work through a service that communicates the data between the two grids components.

"Activite" in grid_A

"Activite" in grid_B

Until here, everything is perfect. However, when I go back to grid A and modify a cell from this column.

In grid_B, I lose the previous values of the other cells:

Here's the code that populates the column in grid_B:

onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit();
      for(let i = 0;i<this.editedRowId.length;i++) {
      var rowNode = this.gridApi.getRowNode(this.editedRowIds[i]);
      rowNode.setDataValue('activite', this.editedActiviteValues[i]);
   }

So, here are my questions:
1/ Why do I lose the values in the other cells after I edit the second cell with setDataValue?
2/ Is there an ag-grid native way to ensure data-persistence?
3/ Should I start using a database(for ex: MongoDb) to reach my goal of data persistence among grids?
Thank you!
PS: If I don't edit the Activite column in Grid_A. The data in Activite column in Grid_B remains untouched. I.e: The data persists. It only disappears if I modify the data again in Grid_A.

In my opinion, I think you should ensure data from both grids are 'immutable'. This would achieve your objective of making sure that the data from grid_a will not affect grid_b when you are editing them, vice versa. Have you by any chance worked with Redux, or Flux? — wentjun, May 08 '19 at 13:21
@wentjun for your question, no. And what do you mean exactly by 'immutable' — Ahmed Ghrib, May 08 '19 at 13:23
@wentjun I have just found a solution and I posted it in an answer. Would you mind checking-it out? — Ahmed Ghrib, May 09 '19 at 08:11
Yes, it looks good!! I think that is the most straightforward way to do it - passing data between components using observables — wentjun, May 09 '19 at 13:55

score 0 · Answer 1 · answered May 09 '19 at 08:10

I have just found a very simple and OBVIOUS solution.
Like, I explained earlieer, I used a service to communicate the data between the grids.
All, I had to do to make the data persist in both components with errors is :
Store the cells values using the services and update them in the grids everytime they get initialized.
(I do not know whether this is the right method or not, but it's simple and it does work. If you have a better solution please let me know).

Here's the service file:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DescActCommunicateAct {
  private activiteSource = new BehaviorSubject<string[]>([]);
  currentActivite = this.activiteSource.asObservable();
  private rowSource = new BehaviorSubject<number[]>([]);
  currentRowIndex = this.rowSource.asObservable();
  constructor() {}
  sendActToBia(activiteValue: string[], rowEditedIndex:number[]) {
    this.activiteSource.next(activiteValue);
    this.rowSource.next(rowEditedIndex)
  }
}

Here's the code you should write in BOTH of your grids:

import {DescActCommunicateAct} from '../services/descActCommunicateAct.service';
 constructor(private data: DescActCommunicateAct
    ) { }
    editedActiviteValues: string[];
   editedRowIds: number[];
    params: any;

ngOnInit() {
    this.data.currentActivite.subscribe(receivedActiviteValue => (this.editedActiviteValues = receivedActiviteValue));
    this.data.currentRowIndex.subscribe(receivedRowId => (this.editedRowIds = receivedRowId));
  }


onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit();
      for(let i = 0;i<this.editedRowIds.length;i++) {
      console.log('________________________________________________________________________')
      var rowNode = this.gridApi.getRowNode(this.editedRowIds[i]);
      rowNode.setDataValue('activite', this.editedActiviteValues[i]);
      }}
    agInit(params: any): void {
      this.params = params;
    }



onCellValueChanged(params) {
    const colId = params.column.getId();


    if (colId === 'activite') {
      this.receivedActiviteValues.push(params.data.activite);
      this.receivedRowIndexes.push(params.node.id);
      this.data.sendActToBia(this.receivedActiviteValues, this.receivedRowIndexes);
    }
  }

Finally, in the grid definition in html file: Make sure to bind the "onGridReady" method:

<ag-grid-angular
  style="width: 5000px ; height: 1000px;"
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  pagination
  (gridReady)="onGridReady($event)"
  [getRowHeight]="getRowHeight"
  [animateRows]="true"
  >
</ag-grid-angular>

Hope this helps someone, out there

Data persistence in ag-grid Angular

1 Answers1