Kendo UI: Place Grid Summary Values in Footer

Question

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?

Answer 1

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!