How to define grid aggregates using data attribute

[Bartlomiej]

How to define grid aggregates using data attribute, with below, its always display "Total Count: 0"

 

<script id="fooTemplate" type="text/x-kendo-template">
    <div id="foo_details">
        <div data-role="grid"
             data-groupable="true"
             data-scrollable="true"
             data-pageable="true"
             data-reorderable="true"
             data-resizable="true"
             data-sortable="true"
             data-filterable="true"
             data-columnMenu="true"
             data-columns='[
                                 { "field": "caseNumber", "title": "Numer sprawy", "aggregates": ["count"], "footerTemplate": "Total Count: #=data.caseNumber? data.caseNumber.count: 0#" },
                              ]'
             data-bind="source: details"
             style="height: 400px"></div>
        <script>
          var viewModel = kendo.observable({
            details: new kendo.data.DataSource({
              transport: {
                read: {
                  url: API_URL + 'foo',
                  dataType: "json",
                },
              },
              aggregate: [
                {field: "caseNumber", aggregate: "count"},
              ],
            }),
          })
          kendo.bind($('\#foo_details'), viewModel)
</script>
</div>

</script>

[Alex Hajigeorgieva]

Hello, Bartlomiej,

I used the provided code snippet with some mocked data and it seems to work well in the test below. However, I was not certain why the grid was in a kendo template so I placed it straight on the page.

http://dojo.telerik.com/@bubblemaster/OLUMEVuh

<div id="my-grid" data-role="grid"
             data-groupable="true"
             data-scrollable="true"
             data-pageable="true"
             data-reorderable="true"
             data-resizable="true"
             data-sortable="true"
             data-filterable="true"
             data-columnMenu="true"
             data-columns='[{ "field": "caseNumber", "title": "Numer sprawy", "aggregates": ["count"], "footerTemplate": "Total Count: #=data.caseNumber? data.caseNumber.count: 0#" },
                              ]'
             data-bind="source: details"
             style="height: 400px"></div>
  </script>
        <script>
          var viewModel = kendo.observable({
            details: new kendo.data.DataSource({
            data:[{caseNumber: 2},{caseNumber: 3},{caseNumber: 4}],
              pageSize:5,
              aggregate: [
                {field: "caseNumber", aggregate: "count"},
              ],
            }),
          });
          kendo.bind($('#my-grid'), viewModel)
</script>

Can you modify the runnable example so that it better demonstrates the real scenario with which you are working so I can provide a suitable suggestion?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik