Declarative creation of Grid with data attribues (footerTemplate)

10 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Jun 2013 Link to this post

    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?

  2. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 14 Jun 2013 Link to this post

    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.}
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 14 Jun 2013 Link to this post

    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.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 17 Jun 2013 Link to this post

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 18 Jun 2013 Link to this post

    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);


  7. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 18 Jun 2013 Link to this post

    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.
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Jun 2013 Link to this post

    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!
  9. Answer
    Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 20 Jun 2013 Link to this post

    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.

  10. cli
    cli avatar
    9 posts
    Member since:
    May 2007

    Posted 12 Mar 2014 in reply to Daniel Link to this post

    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.
  11. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Mar 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready