Kendo UI Angular Grid, to show Total of amount in Grid Footer

[Zaw]

Hello, 

I have the Amount column in my grid which is multiply price and quantity fields from data source. 

    <kendo-grid-column title="Amount" editable="false" width="120">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.Price * dataItem.Quantity}}     
      </ng-template>
    </kendo-grid-column>

How can I add Total of this amount column to show in kendoGridFooterTemplate?
I don't have any group in my group, just want to show total Amount of the whole grid. 

[Hetali]

Hi Zaw,

In order to show the sum of products of two columns in the Kendo UI Grid, follow the steps below:

1. Add a new key-value pair in the object which will be the product of two column values.

constructor() {
  products.forEach(obj => {
    obj["Total"] = obj["UnitsInStock"] * obj["UnitPrice"];
  });
}

2. Use the aggregateBy function which will return the AggregateResult that can be used to display in the Grid Footer.

public aggregates: any[] = [{ field: 'Total', aggregate: 'sum' }];
public total: any = aggregateBy(this.gridData.data, this.aggregates);

<kendo-grid-column title="Total" field="Total" width="120">
  <ng-template kendoGridFooterTemplate>
    Total sum: {{ total["Total"].sum }}
  </ng-template>
</kendo-grid-column>

In this StackBlitz example, the Kendo UI Grid shows the sum of products of two columns.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Zaw]

Hello Hetali

Thanks for your support and example. 
In your example code, at the initial page load, footer show "Total sum: NaN".
The total value is show when I navigate paging and total is only calculate for single page. 

Actually my grid need in-cell editing, do not include paging and filtering. 
The users add and edit rows in the grid by clicking cell and Add button. 
Total will show dynamically at the footer according to the user input values.

Now I used to show Total in label outside of grid and recalculate the amount dynamically on events cellClose, save and remove handler function. 
I just want to know is there any easier way to do this?

Thanks

[Hetali]

Hello Zaw,

To show the total of a column in the Kendo UI In-Cell Editing Grid Footer, use the steps mentioned before in the following manner:

<kendo-grid-column field="Total" [editable]="false" title="Total">
  <ng-template kendoGridFooterTemplate>
    <span *ngIf="total['Total']">
      Total sum: {{ total["Total"].sum }}
     </span>
  </ng-template>
</kendo-grid-column>

public aggregates: any[] = [{ field: "Total", aggregate: "sum" }];
public total: any;

public ngOnInit(): void {
  this.view = this.editService.pipe(
    map(data => {
      data.forEach(obj => {
        obj["Total"] = Math.round(obj["UnitsInStock"] * obj["UnitPrice"]);
      });
      this.total = aggregateBy(data, this.aggregates);
      return process(data, this.gridState);
    })
  );
  this.editService.read();
}

public cellCloseHandler(args: any) {
  this.ngOnInit();
}

In this updated StackBlitz example, the Total column value and the sum of the Total column changes when the user updates the values in the Kendo UI Grid.

Let me know if you need any further assistance.

Regards,
Hetali
Progress Telerik