使用 Knockout-Kendo.js 为 kendo 网格自定义标题以进行 ko 绑定答案

【问题标题】：Customize headers for a kendo grid using Knockout-Kendo.js for ko binding使用 Knockout-Kendo.js 为 kendo 网格自定义标题以进行 ko 绑定
【发布时间】：2013-12-02 17:39:52
【问题描述】：

我尝试使用带有敲除绑定和 Knockout-Kendo.js 库的剑道网格

定义如下：

<div data-bind="kendoGrid:
                {
                    data: SearchResult,
                    rowTemplate: 'rowTmpl',
                    altRowTemplate: 'altTmpl',
                    useKOTemplates: true
                }"> 
</div> 

<script id="rowTmpl" type="text/html">
    <tr class="tdText" role="row">
        <td >
            <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
            </a>
        </td>
        <td data-bind="text: CheckNumber"></td>
        <td data-bind="text: new Date(CreateDate).MMddyyyy()"></td>
        //...
        <td data-bind="text: ParishName">                                        
    </tr>
</script>
<script id="altTmpl" type="text/html">
   //....

从 REST 服务加载的数据有更多我希望在网格中显示的列由于模板，该行看起来不错，但问题在于网格标题，为源中的每个字段创建列。

如何隐藏标题中的某些列，并自定义它们的标题标签（更改列宽、标题标签并最终允许额外的自定义。

例如，在上图中我想要 Co

【问题讨论】：

标签： javascript knockout.js kendo-ui kendo-grid knockout-kendo

【解决方案1】：

目前有一个特定选项可以直接指定标题模板。您可以使用title 或headerTemplate 选项直接指定一组列及其标题，例如：

this.gridOptions = {
    data: this.items,
    rowTemplate: "rowTmpl",
    useKOTemplates: true,
    columns: [ 
        {
            title: "My ID"
        },
        {
            headerTemplate: "<strong>Name Edit</strong>"   
        },
        {
            title: "Name Value"   
        }
    ]
};

示例：http://jsfiddle.net/rniemeyer/yjYMK/

【讨论】：

我很想知道您将如何为动态数量的列执行此操作（列定义来自作为 json/jobject 列表的列表）

【解决方案2】：

您可以通过为网格提供单独的列定义来进行所需的自定义。有了这些，您可以设置width，提供headerTemplate、hide 列：

columns: [{
    field: "FieldName",
    title: "Contact Name",
    headerTemplate: "This will be shown in the header",
    template: "This will be shown in the column",
    hidden: true,
    width: 140
}]

【讨论】：

【解决方案3】：

另外值得注意的是，您可以将绑定应用到您的模板。以下示例使用了敲除绑定：

columns: [{
    field: 'FieldName',
    headerTemplate: '<span data-bind="text:headerName"></span>',
    template: 'This will be shown in the column'
}]

【讨论】：