Kendo Grid calculate difference between two row values - kendo-ui

Question

I am trying to get the row item values of the first and second row and calculate a difference und display it as an custom aggregate. This should happen after every sort so it should check if there are only two rows showing. So for example if the turnover for the year 2017 is 10000€ and 5000€ for 2018 the result should be -50% .
my code:
$(document).ready(function() {
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "turnover.xlsx",
allPages: true
},
dataSource: {
transport: {
read: "data/turnovers.php",
dataType: "jsonp"
},
schema: {
data: "data",
total: function(result) {
var data = this.data(result);
return data ? data.length : 0;
},
model: {
fields: {
January: { type: "number" },
February: { type: "number" },
March: { type: "number" },
April: { type: "number" },
May: { type: "number" },
June: { type: "number" },
July: { type: "number" },
August: { type: "number" },
September: { type: "number" },
October: { type: "number" },
November: { type: "number" },
December: { type: "number" },
sum: { type: "number" },
jahr: { type: "string" }
}
}
},
pageSize: 50,
aggregate: [ { field: "January", aggregate: "sum" },
{ field: "February", aggregate: "sum" },
{ field: "March", aggregate: "sum" },
{ field: "April", aggregate: "sum" },
{ field: "May", aggregate: "sum" },
{ field: "June", aggregate: "sum" },
{ field: "July", aggregate: "sum" },
{ field: "August", aggregate: "sum" },
{ field: "September", aggregate: "sum" },
{ field: "October", aggregate: "sum" },
{ field: "November", aggregate: "sum" },
{ field: "December", aggregate: "sum" },
{ field: "sum", aggregate: "sum" }
]
},
height: 870,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
field: "January",
title: "January",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "February",
title: "February",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "March",
title: "March",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "April",
title: "April",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "May",
title: "May",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "June",
title: "June",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "July",
title: "July",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "August",
title: "August",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "September",
title: "September",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "October",
title: "October",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "November",
title: "November",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "December",
title: "December",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "sum",
title: "sum",
format: "{0:c2}",
filterable: false,
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
}
]
});
});
approach:
function calculatediff(){
var entityGrid = $("#grid").data("kendoGrid");
var data = entityGrid.dataSource.data();
var totalNumber = data.length;
if(totalNumber = 2) {
var currentDataItem = data[0];
var currentDataItem = data[1];
row1 = currentDataItem.January;
row2 = currentDataItem.January;
diff = ((row1-row2)/((row1+row2)/2))*100
}
}

Answer 1

Data source supported aggregate functions are only average, count, max, min, sum and does not have an framework for adding custom functions that work in the same manner.
The aggregates that are computed become available to the footerTemplate as a data object that is available at template resolution time. Thus, the footer can contain a function that is passed this object and perform the custom computation.
This dojo snippet demonstrates the technique.
The dataSource was tweaked to be two rows, and both count and sum (supported aggregate functions) aggregation is specified for each column.
data: [
{ January: 20, February: 30, March: 140, sum: 190 },
{ January: 30, February: 20, March: 50, sum: 100 }
],
pageSize: 50,
aggregate: [ { field: "January", aggregate: "count" }, { field: "January", aggregate: "sum" },
{ field: "February", aggregate: "count" }, { field: "February", aggregate: "sum" },
{ field: "March", aggregate: "count" }, { field: "March", aggregate: "sum" },
{ field: "sum", aggregate: "count" }, { field: "sum", aggregate: "sum" },
]
},
In the columns declaration all the footer templates were tweaked to invoke a custom function that is passed the aggregate data object and the field.
{
field: "January",
/* ... */
footerTemplate: "#= customFooter(data,'January') #"
},
{
field: "February",
/* ... */
footerTemplate: "#= customFooter(data,'February') #"
},
{
field: "March",
/* ... */
footerTemplate: "#= customFooter(data,'March') #"
},
{
field: "sum",
/* ... */
footerTemplate: "#= customFooter(data,'sum') #"
}
Code running inside the footerTemplates does not know the field, so you have to repeat the field name inside the template.
Finally, customFooter() function uses the field aggregates 1) to determine if the special result should be computed and 2) as a partial contribution to the computation. The difference is computed directly from the data source.
function customFooter (ds_agg, field) {
if (ds_agg[field].count == 2) {
var ds = $("#grid").data("kendoGrid").dataSource;
var diff = ds.view()[0][field] - ds.view()[1][field];
var ratio = ( diff / ( ds_agg[field].sum / 2 ) ) * 100;
return "diff: " + diff + "<br />sum: " + ds_agg[field].sum + "<br /> ratio: " + ratio;
}
}