angulareditoraggregationslickgridinline-editing

In Slickgrid,Aggregate Function result is not modifying/updating as per the slickgrid data inline edit

I am using angular slick grid version 4.3.1 to show my list of data. As per configurtion, aggregate function calcuation is happening for column while data is grouped based on a field. After that If I edit the data of a column which is used for aggregate function,the result of data is not updated as per modifield field value.

Steps to reproduce

Configure aggregate function for fields(sum of cost field value,average of duration field value) while configuring specific field(gender column). Enable 'Group By' and drag the specified field(gender field). Aggregate function result of cost and duration column will display. After that if we inline edit the cost field value,sum of cost column result is not modified.

Demo gif for Aggregate Function calculation

Expected Behavior: During inline edit of cost field value,aggregate function result need to be updated.

Kindly provide the solution for this issue in the slick grid.

Software Version

Angular: 15.2.9

Angular-Slickgrid : 4.3.1

TypeScript: 5.3.3

Operating System: Windows 11 Pro

Node: 18.19.0

NPM: 10.2.3

During inline edit of cost field value,aggregate function result need to be updated.

Solution

  • As pointed out in a comment I left earlier, and after testing it, the answer is to call dataView.refresh() after the edit is done so that the DataView Grouping has the updated value(s) and can update (refresh) its Aggregator Totals

    You simply need to listen to the onCellChange event and call the DataView refresh

    <angular-slickgrid gridId="grid19"
                     [dataset]="dataset"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     (onCellChange)="onCellChanged()"
                     (onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>

    then the listener

    angularGridReady(angularGrid: AngularGridInstance) {
  this.angularGrid = angularGrid;
}

onCellChanged() {
  // when user changes a cell, we need to inform the DataView that the data changed 
  // for the Aggregator to have new value(s) and update its totals
  this.angularGrid.dataView?.refresh();
}

    You can see these changes in this PR to demo the changes in Angular-Slickgrid, below is the live demo of it

    draggable grouping editable field