Kendo Grid Aggregation for Footer

Question

I'm trying to achieve showing the sum of a column as a footer. Following official Kendo UI demos, my code is as follows :

@(Html.Kendo().Grid<ORMIModel.Content.ContentPurchase.CheckoutListModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ContentId).ClientTemplate("<a href='javascript:void(0);' onclick='RemoveFromCart(#=ContentId#)'>#=CategoryName#</a>").Width(50).Sortable(true);
    columns.Bound(p => p.CategoryName).Width(140).Sortable(true);
    columns.Bound(p => p.ModelYear).Width(100).Sortable(true);
    columns.Bound(p => p.PurchasePeriod).Width(100).Sortable(true);
    columns.Bound(p => p.PurchasePeriodCount).Width(50).Sortable(true);
    columns.Bound(p => p.FeeFormatted).Width(50).Sortable(true).ClientFooterTemplate("#=sum#");
})
.Sortable()
.ClientDetailTemplateId("detailTemplate")
.Events(v => v.DetailExpand("detailExpand"))
.DataSource(dataSource => dataSource
    .Ajax()
            .Aggregates(v => { v.Add(p => p.Fee).Sum(); })
    .Read(read => read.Action("ListContentForCheckout", "Content"))                   
)

As it can be seen above, I'm properly defining the aggregate field, and applying it as #=sum# to my last column's clientFooterTemplate.

However, I'm getting an error as "Uncaught ReferenceError: sum is not defined "

My datasource has the Fee attribute aswell. Any idea about what I'm doing wrong?

Answer 1

I believe this is caused by your column:

columns.Bound(p => p.FeeFormatted).Width(50).Sortable(true).ClientFooterTemplate("#=sum#");

is targeting the FeeFormatted property but the sum aggregate is processed against the p.Fee property.

try changing the column

    columns.Bound(p => p.FeeFormatted).Width(50).Sortable(true).ClientFooterTemplate("#=sum#");

to

    columns.Bound(p => p.Fee).Width(50).Sortable(true).ClientFooterTemplate("#=sum#");

to see if it works. then use the grid column .Format property to bring in the desired formatting of the Fee value