Grid using local data and aggregates

[Barry]

Hello,

I am using the demo here as a base https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/

I have bound my grid to local array and added an aggregate which is working. The only thing that doesn't update is the Grand Total aggregate at the bottom of the grid.

My Grid definition:

<kendo-grid [kendoGridGroupBinding]="data"
[height]="700"
[pageSize]="50"
[sortable]="true"
[filterable]="'menu'"
scrollable="virtual"
[selectable]="true"
[resizable]="true"
[loading]="this.loading"
[pageable]="true"
[groupable]="{ showFooter: true }">

<kendo-grid-column field="ColumnA" title="ColumnA" width="250">
</kendo-grid-column>
<kendo-grid-column field="ColumnB" title="ColumnB" width="180">
</kendo-grid-column>
<kendo-grid-column field="AccountValue" title="AccountValue" width="180" [format]="'{0:N2}'">
<ng-template
kendoGridGroupFooterTemplate
let-group="group"
let-aggregates>Total: {{aggregates["AccountValue"]?.sum | number: '1.2-2' }}</ng-template>
<ng-template
kendoGridFooterTemplate
let-column="column">Grand Total: {{total["AccountValue"]?.sum | number: '1.2-2' }}</ng-template>
</kendo-grid-column>
</kendo-grid>

 

My component  code:

  public header: any;
  public importId: number;
  public loading = true;
  public data: any = [];
  public aggregates: any[] = [{field: 'AccountValue', aggregate: 'sum'}];

  public total: any = aggregateBy(this.data, this.aggregates);

  constructor(private staticDataService: StaticDataService,
              private activateRoute: ActivatedRoute) { }

  ngOnInit() {
      this.importId = this.activateRoute.snapshot.params.id;
     this.loadData();
  }

public loadData() {
   this.staticDataService.getData(this.importId).subscribe(data => {

    this.data = data;
      this.loading = false;
  });
}

The grouping, sorting and filtering all work great and the Group Totals are updated correctly, the Grand Total amount always stays the same.

 

How can I update this based on changes to the grid?

 

Thanks

[Dimiter Topalov]

Hi Barry,

The total Grid aggregates are the same regardless of the data operations that are applied, as they are calculated based on the whole data set, and nothing updates them, e.g.:

public total: any = aggregateBy(this.data, this.aggregates);

Neither this.data, nor this.aggregates are mutated, thus the total["AccountValue"]?.sum value is always the same. As the total sum will change only when there is filtering applied, you can handle the filterChange or dataStateChange event, and update the aggregates accordingly to use only the data items, currently available in the filtered data set, e.g.:

https://stackblitz.com/edit/angular-gdu2fm?file=app/app.component.ts

Of course, you can further customize this logic to process the data set based on the current state, and update the data set, passed to the aggregateBy function accordingly.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Barry]

Makes perfect sense, not sure how I missed that. Obvious to me once you have explained it!

Thanks!