This is a migrated thread and some comments may be shown as answers.

Declarative creation of Grid with data attribues (footerTemplate)

9 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 13 Jun 2013, 08:34 PM
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?

9 Answers, 1 is accepted

Sort by
0
Dr.YSG
Top achievements
Rank 2
answered on 14 Jun 2013, 01:49 PM
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.}
0
Dr.YSG
Top achievements
Rank 2
answered on 14 Jun 2013, 04:17 PM
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.
0
Daniel
Telerik team
answered on 17 Jun 2013, 12:50 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 18 Jun 2013, 03:40 PM
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);


0
Dr.YSG
Top achievements
Rank 2
answered on 18 Jun 2013, 03:41 PM
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.
0
Daniel
Telerik team
answered on 20 Jun 2013, 01:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Dr.YSG
Top achievements
Rank 2
answered on 20 Jun 2013, 03:23 PM
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.

0
cli
Top achievements
Rank 1
answered on 12 Mar 2014, 03:56 PM
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.
0
Daniel
Telerik team
answered on 14 Mar 2014, 04:44 PM
Hello,

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

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
Dr.YSG
Top achievements
Rank 2
Daniel
Telerik team
cli
Top achievements
Rank 1
Share this question
or