Sum of a calculated value in footer template and group template

1 Answer 27 Views
Data Source Grid
Top achievements
Rank 1
Fernando asked on 12 May 2021, 11:18 AM | edited on 12 May 2021, 11:22 AM


I am not able to get the following sum of calculated values using only kendo functionality. I mean I would like not to use custom functions.

So what i need is do the group sum and total sum for the calculated value Total .Lines In red and in blue in the image.

Also I would like to know why the sum for Units in Stocks is not working in the groupHeaderTemplate, blue line.


My current Spinet is here: but i cannot make show the sum for the total it shows error Uncaught ReferenceError: sum is not defined.

Currently this line is commented.



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 13 May 2021, 09:04 AM

Hi Fernando,

I have already responded to the support thread submitted on the same topic but I will post my reply here as well so the others can also benefit from it.

The reason for this behavior is that the Total model field is defined as a dynamic calculation of another two fields.

                    model: {
                                    fields: {
                                        UnitsInStock: { type: "number" },
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsOnOrder: { type: "number" },
                                        UnitsInStock: { type: "number" }
                                  	Total: function() {
                                        return this.UnitsOnOrder * this.UnitPrice;

To overcome this I recommend creating a custom aggregate for the Total column. For example:

{ field: "Total()", title: "Total", aggregates: ["sum"], footerTemplate: "<div class='summaryWrapper'></div>" }
dataBound: function(e){
              var items = e.sender.items();
              var total = 0;
                var dataItem = e.sender.dataItem(this);
                var totalItem = dataItem.UnitsOnOrder *dataItem.UnitPrice;
                total += totalItem;

              var wrapper = e.sender.element.find(".summaryWrapper");
              wrapper.append("<div>" + "Total: "+total+"</div>");

Here is an updated Dojo of the one shared earlier:

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Data Source Grid
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question