Kendo UI Grid, Group Header not collapsed when using row template
I'm using Kendo UI grid, which has a Group by default. In the group header, it shows some aggregate info. It also uses row template to show row info, i.e. show a Check mark for 'True', Cross mark for 'False'. The code is at below:
It works fine and show the grid correctly. However, if I click to collapse the group header (Yellow circle in below screen shot), it does not work. But if I do not use row template, i.e. comment out this line:
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
Then it works fine (but I want to show the image for Downloaded column).
Is this a bug in Kendo? Anyone knows what I did wrong? Thanks.
I'm using Kendo UI grid, which has a Group by default. In the group header, it shows some aggregate info. It also uses row template to show row info, i.e. show a Check mark for 'True', Cross mark for 'False'. The code is at below:
<
script
id
=
"rowTemplate"
type
=
"text/x-kendo-tmpl"
>
<
tr
>
<
td
>
</
td
>
<
td
>
#: Portfolio #
</
td
>
<
td
>
#: Folder #
</
td
>
<
td
>
#: FileName #
</
td
>
<
td
>
#: DocumentType #
</
td
>
<
td
>
#: ActionTime #
</
td
>
<
td
>
#: UserName #
</
td
>
<
td
>
#: CompanyName #
</
td
>
<
td
>
<
img
src
=
"Images/downloaded_#:data.Downloaded#.png"
alt
=
"downloaded_#:data.Downloaded#.png"
/>
</
td
>
</
tr
>
</
script
>
var dataSource = new kendo.data.DataSource( {
schema: {
model: {
fields: {
... (some other fields)
DocumentType: { type: "string" },
CompanyName: { type: "string" },
Downloaded: { type: "number" }
}
}
},
pageSize: 200,
group: {
field: "CompanyName", aggregates: [
{ field: "CompanyName", aggregate: "count" },
{ field: "DocumentType", aggregate: "count" },
]
},
aggregate: [{ field: "CompanyName", aggregate: "count" },
{ field: "DocumentType", aggregate: "count" },
{ field: "Downloaded", aggregate: "sum" },
]
});
... (some other configurations)
dataSource: dataSource,
columns: [
... (some other fields)
{
field: "DocumentType", title: "Document Type", width: "80px"
},
{
field: "CompanyName", title: "Company Name", width: "100px"
, aggregates: ["count"]
, groupHeaderTemplate: "Company Name: #=value# (#=getDownloaded(data)# / #=count#)"
},
{
field: "Downloaded", title: "Downloaded", width: "50px"
},
],
sortable: true,
filterable: true,
selectable: true,
pageable: {
refresh: false,
pageSizes: [10, 20, 50, 100, 200], // true,
buttonCount: 5
},
scrollable: false,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
});
It works fine and show the grid correctly. However, if I click to collapse the group header (Yellow circle in below screen shot), it does not work. But if I do not use row template, i.e. comment out this line:
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
Then it works fine (but I want to show the image for Downloaded column).
Is this a bug in Kendo? Anyone knows what I did wrong? Thanks.