kendoui grid custom group header with columns

时间:2016-04-04 17:16:06

标签: kendo-ui header grid grouping

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

1 个答案:

答案 0 :(得分:1)

使用Kendo UI Grid的当前实现,只有分组列中的聚合可以显示在groupHeaderTemplate中。

您还可以查看此信息:http://www.telerik.com/forums/multiple-aggregates-in-groupheadertemplate

没有推荐的解决方法。

你可以尝试的是计算你想要的每一笔钱。

 { 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" }] }
                },

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;
        };