Question

我使用的是Kendo UI网格，默认情况下有一个Group。在组标题中，它显示了一些聚合信息。它还使用行模板显示行信息，即显示＆＃39; True＆＃39;的校验标记，＆＃39; False＆＃39;的交叉标记。代码如下：

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

});

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

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

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

enter image description here

这是剑道中的错误吗？谁知道我做错了什么？感谢。

Answer 1

这不能回答这是否是一个错误的问题，但你可以看看这是否使你的网格工作。您遇到行标题不折叠的问题。难怪是否存在隐藏的异常。作为解决方法，您可以使用列模板将图像添加到列中，方法与添加行模板的方式相同。您是否尝试过不使用$ .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未折叠

1 个答案: