Kendo - Grid - Aggregate with Complex Objects

Question

I have a Kendo UI grid. The grid has a datasource with complex object data. For example, {"foo": {"bar" : 10}}. Although the column field can navigate the object graph (i.e. foo.bar), the aggregate field doesn't seem to be able to.

Here's the code:

var grid = $("#grid").kendoGrid({
   dataSource: {
       data: [
           {"foo": {"bar": 10}},
           {"foo": {"bar": 20}}
       ],

       aggregate: [
           {field: "foo.bar", aggregate: "sum"}
       ]  
   },
   columns: [
       {
           field: "foo.bar",
           footerTemplate: "Sum: #= sum # "
      }
  ]   
}).data("kendoGrid");

Here's the fiddle: http://jsfiddle.net/e6shF/1/

Firebug reports "TypeError: data.foo is undefined" in line 8 of kendo.all.min.js.

Am I doing something incorrectly? If this is a bug in Kendo, is there a way to work around this? I have to keep the objects complex.

Answer 1

Here's a "better" anwser from Kendo Support:

The behavior you are experiencing is caused by the fact that the "path" you have specified will be used as a key in the map created as result of the aggregation. Producing a object similar to the following:

{ "foo.bar" : { sum: 30 } }

Unfortunately, this construct is not supported by the footer template generation and will not be resolved correctly. A possible workaround for this scenario is to use a function instead. I have modify the sample in order to illustrate this.

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: [
            {"foo": {"bar": 10}},
            {"foo": {"bar": 20}}
        ],

        aggregate: [
            {field: "foo.bar", aggregate: "sum"}
        ]
    },
    columns: [
        {
            field: "foo.bar",
            footerTemplate: function(data) { return "Sum: " + data["foo.bar"].sum; }
        }
    ]   
}).data("kendoGrid");

Answer 2

It is not possible to have complex objects in aggregates since dynamically generated function for evaluating it, thinks that foo.bar is the name of the field (just one field)?

Do you really need that complex field?

I might understand that the server (providing the data of the grid) sends that complex foo but you can always flatten it using parse or data functions in the datasource. Something like this:

var grid = $("#grid").kendoGrid({
    dataSource:{
        data:[
            {"foo":{"bar":10}},
            {"foo":{"bar":20}}
        ],
        aggregate:[
            {field:"foo_bar", aggregate:"sum"}
        ],
        schema:   {
            parse:function (data) {
                var res = [];
                $.each(data, function (idx, elem) {
                    res.push({ "foo_bar":elem.foo.bar })
                });
                return res;
            }
        }
    },
    columns:   [
        {
            field:         "foo_bar",
            footerTemplate:"Sum: #= sum # "
        }
    ]
}).data("kendoGrid");

Where I transform received foo.bar into foo_bar and use this for aggregation.