This is a migrated thread and some comments may be shown as answers.

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

3 Answers 3537 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zaw
Top achievements
Rank 1
Veteran
Zaw asked on 11 Apr 2021, 06:52 AM

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. 

3 Answers, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 12 Apr 2021, 09:00 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Zaw
Top achievements
Rank 1
Veteran
answered on 13 Apr 2021, 04:07 PM

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

0
Hetali
Telerik team
answered on 13 Apr 2021, 06:33 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Zaw
Top achievements
Rank 1
Veteran
Answers by
Hetali
Telerik team
Zaw
Top achievements
Rank 1
Veteran
Share this question
or