How To Display Aggregates in the Footer Based on Selection in ContextMenu in the Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Description
I want to add custom commands in the Grid context menu. Based on the selection in the context menu I would like to display aggregates in the Grid footer.
Solution
- To achieve the desired behavior you can add a
footerTemplates
in the columns with an emptyspan
element with custom class. - You can also add custom commands to the
contextMenu.body
. - When an item in the ContextMenu is selected you can find the current column index and the field of the selected column.
- Based on the selected custom command you can find the needed aggregate and construct a string containing the needed information. You can use that string to change the content of the footer template of the respective column.
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
aggregate: [
{ field: "Freight", aggregate: "sum" },
{ field: "Freight", aggregate: "average" },
{ field: "OrderID", aggregate: "sum" },
{ field: "OrderID", aggregate: "average" }
]
});
$("#grid").kendoGrid({
dataSource: dataSource,
contextMenu: {
body: [
{ name: "MyCustomPrevPage", text: "Average", icon: "formula-fx", command: "CustomAvgCommand" },
{ name: "MyCustomNextPage", text: "Total", icon: "sum", command: "CustomTotalCommand" }
]
},
editable: false,
pageable: true,
columns: [
{
field:"OrderID",
footerTemplate: "<span class='ft'></span>",
},
{
field: "ShipCity",
title: "Ship City",
footerTemplate: "<span class='ft'></span>",
},
{
field: "Freight",
title: "Freight",
footerTemplate: "<span class='ft'></span>",
}
]
});
kendo.ui.grid.commands["CustomTotalCommand"] = kendo.ui.grid.GridCommand.extend({
exec: function () {
let that = this,
grid = that.grid,
target = this.options.target,
colindex = $(target).index(),
currentField = $("#grid").data('kendoGrid').options.columns[colindex].field,
aggregates = $("#grid").data('kendoGrid').dataSource.aggregates(),
aggregatesCurrentField = aggregates[currentField],
currentAggr = '',
content = '';
if(aggregatesCurrentField){
currentAggr = aggregatesCurrentField.sum,
content = "Total : " + currentAggr;
}else{
content = 'No such aggr'
}
$('.ft:eq('+ colindex +')').text(content)
}
});
kendo.ui.grid.commands["CustomAvgCommand"] = kendo.ui.grid.GridCommand.extend({
exec: function () {
let that = this,
grid = that.grid,
target = this.options.target,
colindex = $(target).index(),
currentField = $("#grid").data('kendoGrid').options.columns[colindex].field,
aggregates = $("#grid").data('kendoGrid').dataSource.aggregates(),
aggregatesCurrentField = aggregates[currentField],
currentAggr = '',
content = '';
if(aggregatesCurrentField != undefined){
currentAggr = aggregatesCurrentField.average
content = "Average : " + currentAggr;
}else{
content = 'No such aggr'
}
$('.ft:eq('+ colindex +')').text(content)
}
});
});
</script>