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

How to define grid aggregates using data attribute

1 Answer 222 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bartlomiej
Top achievements
Rank 1
Bartlomiej asked on 09 Oct 2018, 12:48 PM
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>

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 11 Oct 2018, 11:48 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Bartlomiej
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or