如何使用数据属性为Kendo Grid列设置groupHeaderTemplate？

Question

我希望能够利用数据属性来处理网格配置，但无法弄清楚如何为列设置groupHeaderTemplate。

文档建议我使用data-group-header-template：http://docs.kendoui.com/getting-started/data-attribute-initialization

<table id="grid"
    data-role="grid"
    data-bind="source: dataSource">
  <thead>
    <tr>
      <th 
        data-field="ID"
        data-group-header-template="t_name">ID</th> <!-- Doesn't work! :( -->
      </tr>
  </head>
</table>

<script>
  kendo.bind($('body'), viewModel);
</script>

如何在不直接调用$.fn.kendoGrid？

的情况下在列上设置组标题模板

更新：

我检查了Kendo Grid的源代码，它似乎没有设置列上定义的所有属性。

供参考，在Grid._columns ...

// using HTML5 data attributes as a configuration option
return {
  field: field,
  type: type,
  sortable: sortable !== "false",
  filterable: filterable !== "false",
  groupable: groupable !== "false",
  menu: menu,
  template: th.attr(kendo.attr("template")),
  width: cols.eq(idx).css("width")
};

稍后，在Grid._groupRowHtml

中编写组行html时

template = column.groupHeaderTemplate; // Wasn't set in _columns. :(
if (template) {
    text  = typeof template === FUNCTION ? template(data) : kendo.template(template)(data);
}

Answer 1

您正确使用它。但是，该属性的内容应引用包含您的Kendo模板的脚本元素的ID。

<script id="myscriptname" type="text/x-kendo-template>
    <!--script markup/code here-->
</script>

<table id="grid"
    data-role="grid"
    data-bind="source: dataSource">
  <thead>
    <tr>
      <th 
        data-field="ID"
            data-group-header-template="myscriptname">ID</th>
      </tr>
  </head>
</table>

您还需要调用kendo.bind，在DOM层次结构中传入一个位于表上方的元素。