Kendo UI Grid, Group Header not collapsed when using row template - kendo-ui

Question

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.

Answer 1

This does not answer the question of whether this is a bug but you can see if this makes your grid work. Where you are having an issue with the row header not collapsing. Is wonder if there a hidden exception. As a workaround, you can add the image to the column using a column template the same way you are adding your Row Template. Also have you tried without using $.proxy?
...
{
field: "Downloaded", title: "Downloaded", width: "50px" ,
template: kendo.template($("#tmpColumnDownload").html())
}
..
<script id="tmpColumnDownload" type="text/x-kendo-template">
<img src="Images/downloaded_#=Downloaded#.png" alt="downloaded_#=Downloaded#.png" />
</script>