kendoui grid custom group header with columns

Question

Does anyone know if there is a way to create a custom group header template that will allow columns to be shown with aggregate data by column in that group?

The grid component uses colspan and I want to control the entire rending of the group header template.

Example of modified HTML showing desired UI

Answer 1

With the current implementation of Kendo UI Grid only the aggregates from the grouped column can be displayed in the groupHeaderTemplate.

You can also check this post: http://www.telerik.com/forums/multiple-aggregates-in-groupheadertemplate

There isn't a recomended workaround.

What you can try is to calculate each sum you want.

 { field: "groupField", title: "groupField", groupHeaderTemplate: "#= getGroupInfo(data, count) #", hidden: true },

..

dataSource: {
                    data: gridData,
                    schema: { model: gridModel },
                    pageSize: 20,
                    group: { field: "groupField", aggregates: [{ field: "groupFieldId", aggregate: "count" }] }
                },

And the getGroupInfoFunction:

function getGroupInfo(data, count) {
            return '<div style="float: right;width: 95%;"><div style="float:left;"><span>Number of units in stock: ' + count + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Sum1: " + getSum1(data.value) + '</span></div> Sum2:' + getSum2(data.value) + '</div>';
        };

GetSum1():

 function getBatchStatus(id) {
            var sum;                
            var data = $("#priceChangeTasks").data("kendoGrid").dataSource.data();
            for (var i = 0; i < data.length; i++) {
                if (data[i].groupFieldId== id) {
                    sum += data[i].yoursumfield1;
                }
            }              

            return sum;
        };