Display Aggregation from ContextMenu in Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product | Progress® Kendo UI® ContextMenu for jQuery |
Description
How can I display a specific aggregation by selecting it from a ContextMenu in the footer of the Grid?
Solution
- Add an empty span with custom class as a
footerTemplate
in each column of the Grid.
columns: [
{
field: ...,
title: ...,
footerTemplate: "<span class='ft'></span>",
},
]
- In the
select
event of the ContextMenu component find the current column index, the field of the selected column and the Gridaggregates
.
select: function(e){
var colindex = $(e.target).index();
var currentField = $("#grid").data('kendoGrid').options.columns[colindex].field;
var selected = e.item.innerText;
var aggregates = $("#grid").data('kendoGrid').dataSource.aggregates();
var aggregatesCurrentField = aggregates[currentField];
var currentAggr = '';
...
}
- Based on the selected value in the ContextMenu, find the needed aggregate.
if (selected == 'Total' && aggregatesCurrentField){
currentAggr = aggregatesCurrentField.sum;
} else if (selected == 'Average' && aggregatesCurrentField){
currentAggr = aggregatesCurrentField.average;
} else {
currentAggr = 'No such aggr';
}
- Construct a string, containing the needed information, and use it to change the content of the footerTemplate of the respective column.
var content = selected + ": " + currentAggr;
$('.ft:eq('+ colindex +')').text(content);
The following example demonstrates the full implementation of the suggested approach:
<div id="example">
<ul id="context-menu">
<li>Total
</li>
<li>Average
</li>
</ul>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
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" }
]
},
sortable: true,
filterable: true,
pageable: true,
sort: function(e) {
let originalEvent = event;
if($(originalEvent.target).is("#menuTarget")) {
e.preventDefault();
}
},
columns: [
{
field:"OrderID",
headerTemplate: "<span id='menuTarget' class='k-icon k-i-more-vertical'></span><a class='k-link' href='#'>Amount</a>",
footerTemplate: "<span class='ft'></span>",
},
{
field: "ShipCity",
title: "Ship City",
footerTemplate: "<span class='ft'></span>",
},
{
field: "Freight",
title: "Freight",
footerTemplate: "<span class='ft'></span>",
}
]
});
$("#context-menu").kendoContextMenu({
target: "#grid",
filter: "td",
alignToAnchor: true,
copyAnchorStyles: false,
showOn: "click",
select: function(e){
var colindex = $(e.target).index()
var currentField = $("#grid").data('kendoGrid').options.columns[colindex].field
var selected = e.item.innerText
var aggregates = $("#grid").data('kendoGrid').dataSource.aggregates()
var aggregatesCurrentField = aggregates[currentField];
console.log(aggregatesCurrentField);
var currentAggr = ''
if(selected == 'Total' && aggregatesCurrentField){
currentAggr = aggregatesCurrentField.sum
} else if(selected == 'Average' && aggregatesCurrentField){
currentAggr = aggregatesCurrentField.average
} else {
currentAggr = 'No such aggr'
}
var content = selected + ": " + currentAggr;
$('.ft:eq('+ colindex +')').text(content)
}
});
});
</script>
</div>