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

Popular posts from this blog

DACPAC Pros & Cons

Understanding Asynchronous JavaScript