Kendo UI 网格、组 Header 使用行模板时未折叠

Question

我正在使用 Kendo UI 网格，默认情况下它有一个组。在组 header 中，它显示了一些聚合信息。它还使用行模板来显示行信息，即显示 'True' 的复选标记，'False' 的叉标记。代码如下：

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

});

它工作正常并正确显示网格。但是，如果我单击折叠组 header（下面屏幕截图中的黄色圆圈），它不起作用。但是如果我不使用行模板，即注释掉这一行：

rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),

然后它工作正常（但我想显示已下载列的图像）。

这是 Kendo 中的错误吗？任何人都知道我做错了什么？谢谢。

Answer 1

这并没有回答这是否是错误的问题，但您可以查看这是否使您的网格正常工作。您遇到行 header 未折叠的问题。想知道是否有隐藏的异常。作为一种解决方法，您可以使用与添加行模板相同的方式使用列模板将图像添加到列中。您是否也尝试过不使用 $.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 网格、组 Header 使用行模板时未折叠

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

kendo-ui

kendo-grid

kendo-asp.net-mvc