How to define grid aggregates using data attribute in Kendo UI for jQuery

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

How to define grid aggregates using data attribute

1 Answer 4 Views

Grid

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

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

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.