Kendo UI Grid 列标题模板函数无法访问列定义答案

【问题标题】：Kendo UI Grid column headerTemplate function does not get access to the column definitionKendo UI Grid 列标题模板函数无法访问列定义
【发布时间】：2014-10-22 00:26:44
【问题描述】：

我正在尝试使用Kendo UI Grid 的columns.headerTemplate 功能来自定义列标题。您可以按如下所示使用此功能，并如 this example I created 所示。通常在使用Kendo UI templates 时，小部件会将实体传递给模板函数，因此您可以使用各种属性来自定义要呈现的html。

调试 Kendo UI Grid 代码我可以看到，在 _headerCellText 方法中，对模板函数的调用传入一个空对象而不是列，即使列对象在范围内也是如此。

text = kendo.template(template, settings)({});

在为每列使用自定义列标题模板或更糟糕的情况之前，我可以采取另一种方法吗 - 小部件呈现 DOM 的 jQuery 操作？

是否有充分的理由在此用例的框架中偏离通用模板模式？

// Example kendoGrid use of column.headerTemplate
var templateFunction = function(shouldBeColumn) {
    // shouldBeColumn is an empty object rather than the column object
    return "Useless object:" + kendo.stringify(shouldBeColumn);
  };

$("#grid").kendoGrid({
    dataSource: {
        data: products,
        pageSize: 20
    },
    height: 550,
    scrollable: true,
    columns: [
      { field: "ProductName", title: "Product Name" },
      { field: "UnitPrice", title: "Unit Price", headerTemplate: plainTemplate },
      { field: "UnitsInStock", title: "Units In Stock", headerTemplate: templateFunction }
    ]
});

【问题讨论】：

您是否通过 Telerik 支持部门检查了这一点？您的论点似乎一致：空论点不是很有用，最好发送列对象。
同样令人困惑的是，实际代码是：if (type === FUNCTION) { text = kendo.template(template, settings)({}); 所以他们只在模板是一个函数时才调用kendo.template()，但kenod.template() 的文档声明只有一个字符串是有效的范围。 docs.telerik.com/kendo-ui/api/framework/kendo#methods-template 如果这是在 Kendo 的开源部分，我会记录一个问题并发送一个 pull request 来解决这个问题，但看起来你应该向实际的 Kendo 支持提出一些问题。
据我了解，您得到的行为正在按预期工作。他们不想将列对象传递给您。他们为什么选择这个？身份证。
@OnaBai - 我还没有提出支持，因为源代码非常有说服力，这篇文章主要是为了我将来的参考。与 StackOverflow 相比，Telerik 论坛的界面使用起来非常缓慢，所以我希望他们也能在这里监控 :-)
@CodingWithSpike - 是的，Grid 不是 Kendo UI Core 的一部分，因此不是开源的。此外，我认为我需要更好地理解代码库才能实现与框架一致的良好解决方案。如果您进一步查看代码，您会发现页脚模板的实现完全不同，以支持显示分组信息。

标签： javascript kendo-ui telerik kendo-grid

【解决方案1】：

RE：“在为每列使用自定义列标题模板或更糟糕的情况之前，我是否可以采取另一种方法 - 小部件呈现 DOM 的 jQuery 操作？”

调用一个返回函数的包装函数，因此：

function createHeaderTemplate(columnName) {
    return function() { 
        return "Custom: " + columnName; 
    };
}

...

columns: [
    { field: 'field', headerTemplate: createHeaderTemplate('My Field') },
    { field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]

【讨论】：