Kendo Grid - Dynamic Grid Columns and Aggregate Function
Hi All,
Here i have mentioned how to arrive Kendo Grid Dynamically aggregate functions.
Step 1 : Define the Kendo Grid with data source , in this data source by default we need to assign one column as aggregate.
Step 2 : I have added a column menu against grid named "Summary"
Step 3 : In this Column menu, i show one popup menu for summary like sum,average,count,min,max
var loAggJSON=[];
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id",title: "ID"},
{ field: "name",title: "Name"},
{ field: "country",title: "Country"},
{ field: "description",title: "Description"},
{ field: "votes",title: "Votes"},
],
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
menu.append({
text: "Summary"
});
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Summary") {
var lnColIndex = eval('$($("[data-field='+ field +']")[0]).attr("data-index")');
var lbAggExists=false;
if (dataSource.aggregate().length>0)
{
for(var lnAgg=0;lnAgg<=dataSource.aggregate().length-1;lnAgg++)
{
if (dataSource.aggregate()[lnAgg].field == field){
lbAggExists=true;
}
}
}
if (lbAggExists==false) {
dataSource.aggregate().push({ field: field, aggregate: "count" });
dataSource.aggregate().push({ field: field, aggregate: "min" });
dataSource.aggregate().push({ field: field, aggregate: "max" });
dataSource.aggregate().push({ field: field, aggregate: "sum" });
dataSource.read();
var lsSumText=" Count : " + eval("dataSource.aggregates()."+field+".count");
lsSumText += " Min : " + eval("dataSource.aggregates()."+field+".min");
lsSumText += " Max : " + eval("dataSource.aggregates()."+field+".max");
lsSumText += " Sum : " + eval("dataSource.aggregates()."+field+".sum");
loAggJSON.push({ "colindx": lnColIndex, "coltext": lsSumText });
if (loAggJSON.length>0)
{
for(var lnAgg=0;lnAgg<=loAggJSON.length-1;lnAgg++)
{
$($(".k-footer-template").children() [loAggJSON[lnAgg].colindx]).text(loAggJSON[lnAgg].coltext);
}
}
}
else {
}
}
});
}
});
var locations = [
{
"id": 1,
"name": "Maui",
"country": "USA",
"description": "The second largest Hawaiian island and is known as the Valley Isle",
"imagePath": "content/images/locations/maui.jpeg",
"votes": 20
},
{
"id": 2,
"name": "Dubai",
"country": "UAE",
"description": "Dubai is a business and cultural center for the middle east",
"imagePath": "content/images/locations/dubai.jpeg",
"votes": 18
}
];
var dataSource = new kendo.data.DataSource({
data: locations,
aggregate: [
{ field: "country", aggregate: "average"}
]
});
Comments
Post a Comment