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

Question

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

文档建议我使用data-group-header-template：http ://docs.kendoui.c​​om/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")
};

后来在写group row html的时候Grid._groupRowHtml

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 层次结构中表格上方的元素。