带有隐藏列和聚合的 Kendo UI 网格答案

【问题标题】：Kendo UI grid with hidden column and aggregate带有隐藏列和聚合的 Kendo UI 网格
【发布时间】：2015-12-09 19:07:55
【问题描述】：

如果我创建一个隐藏列，在本例中为 BirthDateMonth 并从数据集创建它，如果我还在另一个字段上添加一个组聚合，那么它将因 JS 错误“sum not defined”而中断.

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(10),
        schema: {
            model: {
                fields: {
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    City: { type: "string" },
                    Title: { type: "string" },
                    BirthDate: { type: "date" },
                    //BirthDateMonth: { type: "date" },
                    Age: { type: "number" }
                },
            },
            parse: function (data) {
                $.each(data, function (idx, item) {
                    if (item.BirthDate)
                    {
                        item.BirthDateMonth = new Date(item.BirthDate.getTime());
                        item.BirthDateMonth.setDate(1);  
                    }                        
                });
                return data;
            }                
        },
        pageSize: 10,
        aggregate: [        
                {field: "Age", aggregate: "sum"}
        ]
    },
    height: 500,
    scrollable: true,
    groupable: true,
    columns: [
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "LastName",
            title: "Last Name"
        },
        {
            field: "City",
        },
        {
            field: "Title"
        },
        {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
        },
        {
            field: "BirthDateMonth",
            title: "Birth Month",
            template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #',
            hidden: true
        },
        {
            field: "Age",
            aggregates: ["sum"],
            footerTemplate: "Sum: #=sum#",
            groupFooterTemplate: "Sum: #=sum#"               

        }
    ]
}).data("kendoGrid");

grid.dataSource.group([{field: "BirthDateMonth"}]);

JSFiddle，任何想法表示赞赏。我尝试将隐藏列字段添加到架构中，但没有效果。

【问题讨论】：

标签： jquery kendo-ui telerik kendo-grid telerik-grid

【解决方案1】：

Jayesh 的解决方案是正确的，谢谢。

您认为这里有什么值得报告的，或者这是预期的行为吗？

我发现的另一点是，如果我添加：

groupHeaderTemplate: "Birth Month: #= value # (Count: #= count#)"

到专栏：

{
  field: "BirthDateMonth",
  title: "Birth Month",
  template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #',
  hidden: true
},

要获取组计数，则组函数需要在同一字段中包含计数聚合：

grid.dataSource.group({
            field: "BirthDateMonth",
            aggregates: [
                { field: "Age", aggregate: "sum" },
                { field: "BirthDateMonth", aggregate: "count" }
            ]
        })

【讨论】：

【解决方案2】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

        function createRandomData(count) {
            var data = [],
                now = new Date();
            for (var i = 0; i < count; i++) {
                var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                    lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                    city = cities[Math.floor(Math.random() * cities.length)],
                    title = titles[Math.floor(Math.random() * titles.length)],
                    birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                    age = now.getFullYear() - birthDate.getFullYear();

                data.push({
                    Id: i + 1,
                    FirstName: firstName,
                    LastName: lastName,
                    City: city,
                    Title: title,
                    BirthDate: birthDate,
                    Age: age
                });
            }
            return data;
        }

        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                dataSource: {
                    data: createRandomData(10),
                    schema: {
                        model: {
                            fields: {
                                FirstName: { type: "string" },
                                LastName: { type: "string" },
                                City: { type: "string" },
                                Title: { type: "string" },
                                BirthDate: { type: "date" },
                                //BirthDateMonth: { type: "date" },
                                Age: { type: "number" }
                            },
                        },
                        parse: function (data) {
                            $.each(data, function (idx, item) {
                                if (item.BirthDate) {
                                    item.BirthDateMonth = new Date(item.BirthDate.getTime());
                                    item.BirthDateMonth.setDate(1);
                                }
                            });
                            return data;
                        }
                    },
                    pageSize: 10,
                    aggregate: [
                            { field: "Age", aggregate: "sum" },
                            { field: "BirthDateMonth", aggregate: "sum" }
                    ]
                },
                height: 500,
                scrollable: true,
                groupable: true,
                columns: [
                    {
                        field: "FirstName",
                        title: "First Name"
                    },
                    {
                        field: "LastName",
                        title: "Last Name"
                    },
                    {
                        field: "City",
                    },
                    {
                        field: "Title"
                    },
                    {
                        field: "BirthDate",
                        title: "Birth Date",
                        template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
                    },
                    {
                        field: "BirthDateMonth",
                        title: "Birth Month",
                        template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #',
                        hidden: true
                    },
                    {
                        field: "Age",
                        aggregates: ["sum"],
                        footerTemplate: "Sum: #=sum#",
                        groupFooterTemplate: "Sum: #=sum#"

                    }
                ]
            }).data("kendoGrid");
            grid.dataSource.group({
                field: "BirthDateMonth",
                aggregates: [
                    { field: "Age", aggregate: "sum" }]
            })
        });
    </script>
</body>
</html>

如果有任何问题，请告诉我。

【讨论】：