Update ag-grid cell values after bulk editing

Question

I am trying to update ag-grid, after cell values change in bulk instead of one value at a time. I know there's already a method (cellvaluechanged) that gives you what value has been changed along with api and colDef. I also tried pasteEnd from ag-grid but this just works for paste, what if user just edits the cell value without copy pasting. What I am trying to do is have a method which will be called after a second or two, grabing all the values changed within ag-grid to avoid multiple rounds to backend. Possible Extension of this question: How to launch a method after a cell value has been edited in ag-grid?

Html

<ag-grid-angular [ngStyle]="{'height.px': innerHeight}" #agGridLevel class="ag-theme-balham"
                    [rowData]="rowData" [gridOptions]="gridOptions" [defaultColDef]="defaultColDef" [sideBar]="sideBar"
                    [columnDefs]="columnDefs" [excelStyles]="excelStyles" [rowSelection]="'multiple'"
                    (selectionChanged)="onSelectionChanged()" (rowClicked)="onRowClicked($event)"
                    [suppressCopyRowsToClipboard]="true"
                    [enableRangeSelection]="true"
                    (cellValueChanged)="onCellValueChanged($event)"
                    (gridReady)="onGridReady($event)">
                    >
                </ag-grid-angular>

component.ts file

P.S. I know the method would still call backend multiple times even with timeout. This was just to show what I was trying to do.

onCellValueChanged(params) {
    console.log("Callback onCellValueChanged:", params);
    if (params.newValue) {
      this.changedValue.push({
        field: params.colDef.field,
        newValue: params.newValue.trim(),
        id: params.data.id
      });
      setTimeout(() => {
        this.updateCellValuesInDb(this.changedValue)
      }, 1000);
    }
  }

Would help a lot if someone knows how to bulk load the whole cell values changed after a second or two instead of sending every single value changed. Please advice.

Thank you

I had to deal with a similar situation but what helped for me was there was a button for the user to accept the bulk update so maybe you can compromise and create a button like so as well and once it clicks you can do `this.updateCellValuesInDb`. — AliF50, Mar 03 '20 at 00:58
Thank you for the comment. The only reason I am reluctant to add a button is that it will take away the beauty of ag-grid excel like copy pasting. I was looking for more of a method/event that is provided out of the box from ag-grid. — kode-Aid, Mar 03 '20 at 06:32
Just use mostly your current method (collect changes in memory), but only allow `updateCellValuesInDb` to be called at most once every "second or two" with [`debounce`](https://lodash.com/docs/4.17.15#debounce) or [`throttle`](https://lodash.com/docs/4.17.15#throttle). — thirtydot, Mar 03 '20 at 14:43

kode-Aid · Accepted Answer · 2020-03-03T22:23:42.363

I was able to use Interval based on comments. What happens is once the cell value changes, onCellValueChanged event is fired, from which I get changed value, Id of the row along with the actual field name. setTimeout() on the values changed just in case if there's 10-20 values pasted together to avoid back and forth backend calls.

Update CellValue then sets interval(500).

In the final step, isCellValueUpdated boolean declared as false in the component will handle the multiple calls to backend and bulk load will be done once per actual request for multiple records.

    onCellValueChanged(params) {
        console.log('Callback onCellValueChanged:', params);
        if (params.newValue) {
          this.changedValue.push({
            field: params.colDef.field,
            newValue: params.newValue.trim(),
            id: params.data.id
          });
          setTimeout(() => {
            this.updateCellValues(this.changedValue);
          }, 1000);
        }
      }
      private updateCellValues(values: IGridChangedValues[]) {
        const changeBooleanAfterValuesChange = interval(500);
        this.updateDb({ values, changeBooleanAfterValuesChange });
      }


      private updateDb(
    { values, changeBooleanAfterValuesChange }:
      { values: IGridChangedValues[]; changeBooleanAfterValuesChange: Observable<number>; }) {
    if (!this.isCellValueUpdated) {
      this.isCellValueUpdated = true;
      this._studyLevelService.updateCellValuesInDb(values).pipe(takeUntil(this.unsubscribe$)).subscribe(
        (result: boolean) => {
          if (result) {
          } else {
            this._dialogs.alert(new AlertDialogOptions(
              'Error',
              'Error Updating values'));
          }
          changeBooleanAfterValuesChange.pipe(takeUntil(this.unsubscribe$)).subscribe(
            () => this.isCellValueUpdated = false
          )
        })
    }
  }

I was hoping there might be a better solution out there to avoid intervals and timeouts, but I think that's the best technique available for ag-grid right now

Update ag-grid cell values after bulk editing

1 Answers1