Kendo – Grid – Custom Aggregate in FooterTemplate

aggregatesgridkendo-uitemplates

My understanding is that Kendo does not support custom aggregates but you can call a function in the footerTemplate. That function then can provide calculations on the data and can even reference kendo defined aggregates. So, for example,

footerTemplate: "<div><b>Range</b> #= computeRange()#</div>"

If this is correct, how would you write the function computeRange? It would use max-min aggregates.

Also, how would you write a computeMedian function?

Thanks in advance for your help.

Best Answer

function computeRange(){
    var bal         =   0;
    var ds          =   $("#itemcode_grid").data("kendoGrid").dataSource;
    var aggregates  =   ds.aggregates();
    if(aggregates.total_balance)
        bal         =   aggregates.total_balance.sum;
    else
        bal         =   0;
    return kendo.toString(bal,'n2');
}

Related Solutions

Reloading/refreshing Kendo Grid

You can use

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Custom Kendo UI Grid Footer – Update Dynamically

Try this... replace your footer template with this:

footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>"

Notice how I put a span element with an ID in it? This makes it easy to change and update the total whenever needed. I gave it an id of myId

Now I think you want that total to update after every cell edit (and not necessarily when you save the grid). Every time the cell is successfully editted, the change event is fired on the kendo dataSource. So fire up the recalculation in the change event. Your datasource will now look something like this:

window.ds = new kendo.data.DataSource({
     data: [
         //omitted code...
     ],
     pageSize: 10,
     schema: {
         //omitted code...               
     },
     change: function(e){
          var total = window.calc();
          $("#myId").html(total.toString());
     }
});

No need to call that ugly refresh on the grid ;) . Here is your revised sample.

Best Answer

Related Solutions

Reloading/refreshing Kendo Grid

Custom Kendo UI Grid Footer – Update Dynamically

Related Topic