Kendo UI: Place Grid Summary Values in Footer

kendo-grid, kendo-ui

Solution

Yes indeed! check DataSource Aggregate.

Example:

var stocksDataSource = new kendo.data.DataSource({
    transport:{
        read:function (options) {
        }
    },
    schema   :{
        model:{
            fields:{
                name :{ type:"string" },
                price:{ type:"number" }
            }
        }
    },
    aggregate:[
        { field:"price", aggregate:"sum" }
    ],
    pageSize :10
});

I have defined a `DataSource` with two fields: the items `name` and `price`. I want to totalize the `price` so I defined an `aggregate` for `price` and what I'm going to do is `sum` (you can also `min`, `max`, `average` and `count`).

Then in the `Grid` when I define the columns I write:

columns    :[
    { field:"name", title:"Product" },
    { field:"price", title:"Price", footerTemplate:"Sum: #= sum # " }
],

And that's it!

Problem

Using the Kendo UI Grid and MVC 4, I haven't been able to find a way to put summary totals (financial) at the bottom of the grid for select columns. Is this possible?

Original source