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?

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!

Comments

[Ian Vink]

How would that be done in an @Html.Kendo().Grid(Model) helper?

[OnaBai]

Let me see if I can type as SO comment this: .DataSource(dataSource => dataSource.Ajax().Aggregates(aggregates => { aggregates.Add(p => p.price).Sum(); } ) ) And the column: Columns(columns => { columns.Bound(p => p.name); columns.Bound(p => p.price) .ClientFooterTemplate("Sum: #=sum#"); })

[OnaBai]

I'm glad it has been useful!!

[Johan J v Rensburg]

@OnaBai I would just like to know if you can answer the last part of question as well?

[OnaBai]

@JohanJvRensburg, which is the latest part of the question that is missing?

[Johan J v Rensburg]

@OnaBai "for select columns" is the last part I'm revering to.

[OnaBai]

@JohanJvRensburg not sure what is the problem, my answer only computer total for column Price, you can do the same with whichever column.

[Johan J v Rensburg]

@OnaBai what I'm trying to ask if how do you do this for selected rows I see that I misread the question. What I would like to know if how to do this for selected rows.

[OnaBai]

@JohanJvRensburg It might be done but this is a completely new question. Maybe you should post a different question.