Declarative creation of Grid with data attribues (footerTemplate)

[Dr.YSG]

I have a Grid which works fine until I try to add an aggregate value and create a footer.

<div id="layerTable"
    class="Part"
    data-role="grid"
    data-column-menu="true"
    data-filterable="true"
    data-sortable="true"
    data-scrollable="false"
    data-resizable="true"
    data-reorderable="true"
    data-groupable="true"
    data-bind="source: LayerTable"
     data-columns='[
        "Class",
        "Type",
        "FileCount",
        {field: "Size",
         format: "{0:n3} MB"
        },
        {field: "Date",
         format: "{0:F}" },
        "Path"]'>
</div>

I have tried adding in the aggregate both in the dataSource (which is a JSON array:

manifest.Layers.aggregate =
[
        {field: "Size", aggregate: "sum"},
        {field: "FileCount", aggregate: "count"}
];

As well as in the HTML:

<div id="layerTable"
    class="Part"
    data-role="grid"
    data-column-menu="true"
    data-filterable="true"
    data-sortable="true"
    data-scrollable="false"
    data-resizable="true"
    data-reorderable="true"
    data-groupable="true"
    data-bind="source: LayerTable"
     data-columns='[
        "Class",
        "Type",
        "FileCount",
        {field: "Size",
         format: "{0:n3} MB",
         aggregates: ["sum"],
         footerTemplate: "Total: #: sum# "
        },
        {field: "Date",
         format: "{0:F}" },
        "Path"]'>
</div>

However, any combination I have tried (only footer, only HTML column aggregates, or only data-source aggregates is not working.

What happens? All the declared Kendo objects later on in the page (sliders, combo-boxes, etc.) all do not load at page reload time.

I am guessing that I am trying do something that is not supported. Right?

[Dr.YSG]

The DataSource for the Grid is being bound via MVVM to a Kendo.ObservableObject. That might be one source of the issues. Here is what the Object looks like:

01.{
02. "Layers" : [
03.  {
04.   "Class" : "BASE",
05.   "Date" : "\/Date(1370539274583-0400)\/",
06.   "FileCount" : 43691,
07.   "Path" : "http:\/\/localhost\/BaseMaps\/DRAPER-Little-BlueMarble",
08.   "Size" : 14.28853607177734,
09.   "Type" : "Little-BlueMarble"
10.  },
11.  {
12.   "Class" : "BASE",
13.   "Date" : "\/Date(1370539006327-0400)\/",
14.   "FileCount" : 43691,
15.   "Path" : "http:\/\/slocalhost\/BaseMaps\/NASA-BlueMarble",
16.   "Size" : 184.28853607177734,
17.   "Type" : "NASA-BlueMarble"
18.  },
19.  {
20.   "Class" : "OVERLAYS",
21.   "Date" : "\/Date(1370538407040-0400)\/",
22.   "FileCount" : 121,
23.   "Path" : "http:\/\/localhost\/TileSetJobs\/CIB10",
24.   "Size" : 3.0540943145751953,
25.   "Type" : "CIB10"
26.  }
27. ]
28.}

[Dr.YSG]

I tried changing the MVVM (VM Kendo.ObservableObject) from a JSON to a Kendo.DataSource() this helped with another problem I raised in this forum. But NOT with this issue.

[Daniel]

Hello,

You should use a condition in the template. When using declarative binding, the Grid will be assigned with a default dataSource initially with no aggregates so an error will be thrown when trying to access the aggregate value directly. I created a small jsBin example that demonstrates this scenario.

Regards,
Daniel
Telerik

[Dr.YSG]

Your JSBIN is very informative, thank you.

Here is what I have for my data columns declaration. {PS. I know that
the aggragates().Size.sum is working, since I use it in other places.

01.<div id="layerTable"
02.    class="Part"
03.    data-role="grid"
04.    data-column-menu="true"
05.    data-filterable="true"
06.    data-sortable="true"
07.    data-scrollable="false"
08.    data-resizable="true"
09.    data-reorderable="true"
10.    data-groupable="true"
11.    data-editable="{confirmation: false}"
12.    data-bind="source: LayerTable"
13.    data-toolbar='["save","cancel"]'
14.    data-columns='[
15.        "Class",
16.        "Type",
17.        "FileCount",
18.        {field: "Size",
19.         format: "{0:n2} MB",
20.         aggregates: ["sum"],
21.         footerTemplate: "Total: #=data.Size? sum: 0 # "
22.        },
23.        {field: "Date",
24.         format: "{0:F}" },
25.        "Path",
26.        {command: "destroy"},
27.    ]'>
28.</div>

If I remove like #21, the page loads without errors. Otherwise, I get this error:



I am getting the following error on line 281 of kedo.all.js



ReferenceError: sum is not defined



 

return new Function(argumentName, functionBody);

[Dr.YSG]

I am unable to post to this forum (I am logged in). I keep getting: "Invalid post content.",

So with great reluctance, I submitted my response as a support ticket.

[Daniel]

Hello,

If the Grid is not grouped, the template will not be recreated so the full path will be needed to access the aggregate values. An alternative solution would be to use the "data-source" attribute to set the dataSource instead of source binding. I updated the jsBin to show both options.

Regards,
Daniel
Telerik

[Dr.YSG]

I submitted support ticket: #705810, and I am 95% there. I am only asking for a little help with nested quotation. Thank you for your help.

[cli]

Can you make this part of the demo or docs regarding aggregates?  It took me hours to find this solution.  I'm sure I wasn't the first nor will be the last.  I feel these two points are lacking from the demos & docs:

1. You need a conditional template when using aggregates and declarative binding ie - #= data.UnitsInStock? min: 0 #
2. If not using grouping you need the full path (which I didn't know existed) ie - #= data.UnitsInStock? data.UnitsInStock.min: 0 #

Better yet.  Replace the current aggregates demo with your jsBin http://jsbin.com/ijeyab/5/edit example.  It's more complete.  I'm assuming it works with imperative binding as well.

[Daniel]

Hello,

Thank you for the feedback. We will include this in the documentation.

Regards,
Daniel
Telerik