Populate Column Aggregates In Separate div Elements
Environment
| Product Version | 2017.3 1026 |
| Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I populate a column aggregate (sum) into a separate div element outside the Grid?
Solution
To retrieve the aggregate of a column, use the aggregates method of the dataSource.
<body>
<div id="example">
<div id="agg"> </div>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
aggregate: [{ field: "UnitsInStock", aggregate: "sum" }]
},
sortable: true,
dataBound:function(e){
var aggSum = e.sender.dataSource.aggregates().UnitsInStock.sum
$('#agg').html("The sum of the Units In Stock column is: "+ aggSum)
},
scrollable: false,
pageable: true,
columns: [
{ field: "ProductName", title: "Product Name"},
{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
});
</script>
</div>
<style>
#agg{
margin: 25px;
}
</style>
</body>