Kendo网格子组总计不显示在标头模板中

时间:2014-07-03 07:33:08

标签: javascript jquery kendo-ui kendo-grid

我在Kendo网格分组中遇到了一些问题。如果是任何一个列聚合只有hrs列。即,仅为小时的总和不需要任何其他列值 - 。

此处子组总数未显示在标题列中。不需要页脚模板。请找到我的代码并建议我在哪里弄错它或给我任何解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="grid">
</div>
<script type="text/javascript">
    var pictures = [{
        Dept: "Dept1",
        Proj: "P1",
        Per: "A",
        hrs: 10
    }, {
        Dept: "Dept1",
        Proj: "P1",
        Per: "B",
        hrs: 20
    }, {
        Dept: "Dept1",
        Proj: "P2",
        Per: "C",
        hrs: 12
    }, {
        Dept: "Dept1",
        Proj: "P2",
        Per: "D",
        hrs: 10
    }, {
        Dept: "Dept1",
        Proj: "P2",
        Per: "E",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P1",
        Per: "A",
        hrs: 20
    }, {
        Dept: "Dept2",
        Proj: "P1",
        Per: "B",
        hrs: 20
    }, {
        Dept: "Dept2",
        Proj: "P1",
        Per: "C",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P2",
        Per: "A",
        hrs: 12
    }, {
        Dept: "Dept2",
        Proj: "P2",
        Per: "B",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P2",
        Per: "C",
        hrs: 1
    }, {
        Dept: "Dept2",
        Proj: "P2",
        Per: "D",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P3",
        Per: "A",
        hrs: 12
    }, {
        Dept: "Dept2",
        Proj: "P3",
        Per: "B",
        hrs: 20
    }, {
        Dept: "Dept2",
        Proj: "P3",
        Per: "C",
        hrs: 20
    }, {
        Dept: "Dept2",
        Proj: "P3",
        Per: "D",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P4",
        Per: "A",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P4",
        Per: "B",
        hrs: 10
    }, {
        Dept: "Dept2",
        Proj: "P5",
        Per: "A",
        hrs: 20
    }, {
        Dept: "Dept2",
        Proj: "P4",
        Per: "C",
        hrs: 20
    }];

    var dataSource = new kendo.data.DataSource({
        data: pictures,
        aggregate: [{ field: "hrs", aggregate: "sum"}]
    });

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
         {
             field: "Dept",
             groupHeaderTemplate: "Total Hrs: #= getSum(value) #"
         },
         {
             field: "Proj",
             groupHeaderTemplate: "Total Hrs: #= getSum(value) #"
         },
         {
             field: "Per",
             groupHeaderTemplate: "Total Hrs: #= getSum(value) #"
         },
         {
             field: "hrs",
             aggregates: ["sum"],
             groupHeaderTemplate: "Total Hrs: #= sum #"
         }
        ],
            groupable: true
        });
    });
    function getSum(value) {
        var datasource = $("#grid").data("kendoGrid").dataSource;
        var result = 0;
        $(datasource.view()).each(function (index, element) {
            if (element.value === value) {
                result = element.aggregates.hrs.sum;
            }
        });
        return result;
    }
</script>
</body>
</html>

enter image description here

0 个答案:

没有答案