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

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).

enter image description here

Is this a bug in Kendo? Anyone knows what I did wrong? Thanks.

I don't know if its a bug. I have not encountered this. As a workaround ,until you figure it out, you can set each column's template seperatly and see if that works. Add the image to the downloaded column's client template. — Ross Bush
thanks. is there a code sample to do like what you described? I'm not familar with kendo, not sure how to do it. Thanks again. Also, please post it as an answer if you do not mind. — urlreader

Ross Bush Ross Bush · Accepted Answer · 2015-02-17T19:07:05

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>

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

1 Answers