How to show aggregated value in ClientGroupHeaderTemplate in Kendo Grid - kendo-ui

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 #");