CODEWITHSUNDEEP
jquerykendo-uitelerikkendo-gridtelerik-grid
Stuart
Stuart

Reputation: 21

Kendo UI grid with hidden column and aggregate

If I create a hidden column, in this case BirthDateMonth and create it from the dataset, if I also add a group aggregate on another field then it will break with JS error "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, any thoughts appreciated. I tried adding the hidden column field to the schema, but no effect.

Upvotes: 0

Views: 1934

Answers (2)

Stuart
Stuart

Reputation: 21

The solution from Jayesh is correct, thanks.

Do you think there is anything worth reporting here, or is this expected behaviour?

One other point I found was that if I add:

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

to the column:

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

to get the group count, then the group function needs to include the count aggregate on the same field:

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

Upvotes: 1

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

<!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>

Let me know if any concern.

Upvotes: 0

Related Questions