How to define grid aggregates using data attribute

2 posts, 0 answers
  1. Bartlomiej
    Bartlomiej avatar
    6 posts
    Member since:
    Feb 2016

    Posted 09 Oct 2018 Link to this post

    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>

  2.
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 11 Oct 2018 Link to this post

    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.
Back to Top