How to show aggregated value in ClientGroupHeaderTemplate in Kendo Grid

Question

I am using UI for ASP.NET MVC to build a grid. I want to group rows by the Name column and show sum of the Cost column in the group header.

Here is my grid

     @(Html.Kendo().Grid<GridModel>()
            .Name("myGrid")
            .Columns(col =>
            {
                col.Bound(p => p.Name).Width(300);
                col.Bound(p => p.Year).Width(100);
                col.Bound(p => p.Cost).Width(100)
                    .ClientGroupHeaderTemplate("Total: #: sum #");
            })
            .AutoBind(true)
            .DataSource(dataSource => dataSource
                .Ajax()
                .Aggregates(aggregates =>
                {
                    aggregates.Add(p => p.Cost).Sum();                        
                })
                .Group(groups => groups.Add(p => p.Name))
                .Read(read => read
                    .Action("GetData", "Home", new { ID = Model.ID }))
                .ServerOperation(false))
            )

The grid above does not show or render sum in group header.

The demo here shows how to do it, however it showing aggregated values in group footer. I want to show sum in group header.

In above grid if i replace ClientGroupHeaderTemplate with ClientGroupFooterTemplate then i see sum in group footer, but i want to show sum in group header.

What i am missing here

Update 1
Also as per the documentation aggregates object is available in ClientGroupHeaderTemplate which provides access to all available aggregates

aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average

so i tried

 col.Bound(p => p.Cost).Width(100)
                .ClientGroupHeaderTemplate("Total: #= aggregates.Cost.sum #");

but this did not work either.

It looks like ClientGroupHeaderTemplate only works if the column is a part of group.

In my case I am grouping by Name column so Cost column is not part of Group

Answer 1

aggregates will not work for older versions of kendo

Without grouping Try putting this in javascript

var aggregates;

$(function(){
    // get aggregates from datasource. Access to all aggregates
    aggregates = $("#grid").data("kendoGrid").dataSource.aggregates();
})

Along with this in view

 col.Bound(p => p.Cost).Width(100).ClientGroupHeaderTemplate("Total: #= aggregates.Cost.sum #");