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

[reader]

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:

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

[Rosen]

Hi,

The issue is caused my missing class of the group cell(s). It should be decorated with a k-group-cell class:

<tr>
    <td class="k-group-cell"> </td>
    <td>
            #: Portfolio #
     </td>
<!--...-->
</tr>

Regards,
Rosen
Telerik