HI I'm fairly new to Kendo UI and want to practice using Kendo Grid. I was trying to follow the demo for aggregation and somehow it puts out random number.
I attached output for my program and here is my code:
<!DOCTYPE html>
<head>
<title></title>
<base href="https://demos.telerik.com/kendo-ui/grid/excel-export">
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<div class="row">
<div class="col-12">
<div id="grid"></div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
},
aggregate: [
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsInStock", aggregate: "count"}]
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: {
mode: "single",
allowUnsort: false
},
groupable: true,
filterable: {
mode: "row"
},
reorderable: true,
resizable: true,
columnMenu: true,
height: 850,
toolbar: ["create", "excel", "pdf"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.8
},
columns: [
{ selectable: true, width: "50px" },
{ field: "ProductName", title: "Product Name", groupable: true, width: "400px" },
{ field: "UnitPrice", title: "Unit Price", groupable: true, aggregates: ["sum"], footerTemplate: "Sum: $#= sum#", format: "{0:c}", width: "200px" },
{ field: "UnitsInStock", title: "Units In Stock", groupable: true, aggregates: ["count"], footerTemplate: "Count: #=count#", width: "200px" },
{ field: "Discontinued", groupable: true, width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
function customBoolEditor(container, options) {
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
}
</script>
Thank you!
1 Answer, 1 is accepted
Hi Jong,
Thank you for the code.
The columns.aggregates can be used to define the aggregates which can be used only when the grid is grouped by columns field i.e. only in the columns.groupFooterTemplate.
In the example, the aggregate method in the DataSource calculates the sum of the UnitPrice and the count of the UnitsInStock across data and displays it accordingly in the Grid using the columns.footerTemplate.
However, if you are looking to get the sum and the count of the data present in the particular page, please add the following custom functions:
$("#grid").kendoGrid({
columns: [
{ field: "UnitPrice", title: "Unit Price", groupable: true, footerTemplate: footerTemplateSum, format: "{0:c}", width: "200px" },
{ field: "UnitsInStock", title: "Units In Stock", groupable: true, footerTemplate: footerTemplateCount, width: "200px" }],
});
function footerTemplateCount(e){
var grid =$("#grid").data("kendoGrid");
var count = 0;
return "Count: " + (count+grid._data.length);
}
function footerTemplateSum(e){
var grid =$("#grid").data("kendoGrid");
var sum = 0;
for(let i=0; i<grid._data.length; i++){
var units = grid._data[i].UnitPrice;
sum += units;
}
return "Sum: " + sum;
}
Please take a look at this Dojo sample where the Grid footer displays the sum and the count of the data present in the particular page.
Please let me know if this is something that you're looking for. If not, could you please reply with more details of what you're trying to achieve?
I look forward to your reply.
Regards,
Hetali
Progress Telerik