Hi,
I'm using kendo-ui with aurelia and opted for the kendui templating for exporting grouped grid data and have everyting working except the section marked below when grouping and refreshing the dataset. In summary I want to refresh datasource and maintain aggregate groupings.
Thanks,
John
This works. No aggregate totals in groups.
changeData() {
let s1 = moment(this.startDatePicker._value).format('MM-DD-YYYY')// moment(this.startDatePicker.value).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker._value).format('MM-DD-YYYY') //moment(this.endDatePicker.value ).format('MM-DD-YYYY')
// the api fetching new data
api.getTWO(s1, s2)
.then((jsonRes) => {
let twos = jsonRes;
let grid = jQuery(this.grid).data('kendoGrid');
grid.setDataSource(dataSource) // dataSource.read();
})
}
attached() {
jQuery(this.grid).kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true,
allPages: true
},
dataSource: {
type: "json",
transport: {
read: "http://localhost:8080/api/v1/two/getAll/" + s1 + "/" + s2
},
group: [{ field: "TenantCategory_Desc" }, { field: "CYM" }],// set grouping for the dataSource
schema: {
model: {
fields: {
CompanyName: { type: "string" },
CYM: { type: "string" },
CDATE: { type: "string" },
TenantCategory_TenantCategory: { type: "string" },
TenantCategory_Desc: { type: "string" },
Comments: { type: "string" },
Total: { type: "number" },
TenantCategory_Amt: { type: "number" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
columns: [
{ field: "CompanyName", filterable: false },
"CYM",
"CDATE",
{ field: "TenantCategory_Desc", title: "TenantCategory_Desc" },
{
field: "Total",
title: "Total"
}, {
field: "TenantCategory_Amt",
title: "TenantCategory_Amt"
}
],
});
}
}
This Does Not work
changeData() {
let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
api.getTWO(s1, s2)
.then((jsonRes) => {
let twos = jsonRes;
let dataSource = new kendo.data.DataSource({ data: twos });
let grid = jQuery(this.grid).data('kendoGrid');
let dataSource = new kendo.data.DataSource({ data: twos });
let grid = jQuery(this.grid).data('kendoGrid');
grid.dataSource.group({
field: "TenantCategory_Desc", aggregates: [
{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }
],
})
grid.setDataSource(dataSource)
dataSource.read();
})
}
attached() {
this.startDatePicker.value = this.ss1;
jQuery(this.grid).kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true,
allPages: true
},
dataSource: {
type: "json",
transport: {
read: "http://localhost:8080/api/v1/two/getAll/" + this.ss1 + "/" + this.ss2
},
group: {
field: "TenantCategory_TenantCategory", aggregates: [
{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }
]
}
,
schema: {
model: {
fields: {
CompanyName: { type: "string" },
CYM: { type: "string" },
CDATE: { type: "string" },
TenantCategory_TenantCategory: { type: "string" },
TenantCategory_Desc: { type: "string" },
Comments: { type: "string" },
Total: { type: "number" },
TenantCategory_Amt: { type: "number" }
}
}
},
pageSize: 20,
aggregate: [{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }]
},
groupable: true,
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "TenantCategory_Desc", title: "TenantCategory_Desc", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ field: "Total", title: "Total", aggregates: ["sum"], footerTemplate: "#= kendo.toString(sum, '0.00') #", groupFooterTemplate: "#= kendo.toString(sum, '0.00') #" },
{ field: "CompanyName", filterable: false },
{ field: "CYM", title: "YearMonth", filterable: true },
{ field: "CDATE", filterable: false },
]
});
}
}
}
2 Answers, 1 is accepted
You can use the dataSource.query() method and provide all necessary data operation parameters and configuration options (page, pageSize, sort, filter, group, aggregate):
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-query
The following documentation article on Aurelia-Kendo UI integration might also prove useful:
http://docs.telerik.com/kendo-ui/third-party/aurelia
I hope this helps.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1
Hi
1) The following function disables grouping and exports to excel
changeData() {
let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
api.getTWO(s1, s2)
.then((jsonRes) => {
let twos = jsonRes;
let dataSource = new kendo.data.DataSource({ data: twos });
let grid = jQuery(this.grid).data('kendoGrid');
dataSource.query({
group:{
field: "TenantCategory_TenantCategory", aggregates: [
{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }
]}
})
2) While I use Aurelia-KendoUI Bridge, my understanding and proactice shows that if I use aurelia or angular templating, I loose the ability to get totals to display in footers in grid and exports. Jeroen Vinke told me 'That is where the bug occurs (we use the same "hook" for aurelia templates:
3) I got the following to work by reloading the page. Now all grouping exports work fine.
import {activationStrategy} from 'aurelia-router';
changeData() {
let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
let rt = 'two'
console.log('this.route ', this.route)
this.router.navigate(rt + '/1' + '?d1=' + s1 + '&d2=' + s2);
}