javascript Kendo UI Grid 列 headerTemplate 函数无法访问列定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25543764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI Grid column headerTemplate function does not get access to the column definition
提问by Martin Hollingsworth
I'm trying to use the columns.headerTemplatefeature of a Kendo UI Gridto customise the column header. You use this feature as shown below and as demonstrated by this example I created. Normally when using Kendo UI templates, the widget will pass the entity into template function so you can use the various properties to customise the html to be rendered.
我正在尝试使用Kendo UI Grid的columns.headerTemplate功能来自定义列标题。您可以按如下所示使用此功能，并如我创建的这个示例所示。通常在使用Kendo UI 模板时，小部件会将实体传递给模板函数，以便您可以使用各种属性来自定义要呈现的 html。
Debugging the Kendo UI Grid code I can see that in the _headerCellTextmethod the call to the template function passes in an empty object rather than the column even though column object is in scope.
调试 Kendo UI Grid 代码我可以看到，在该_headerCellText方法中，即使列对象在范围内，对模板函数的调用也会传入一个空对象而不是列。
text = kendo.template(template, settings)({});
text = kendo.template(template, settings)({});
Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?
在为每列使用自定义列标题模板或更糟 - jQuery 操作呈现的 DOM 小部件之前，我可以采取另一种方法吗？
Is there a good reason for deviating from the common template pattern in the framework for this use case?
对于此用例，是否有充分的理由偏离框架中的通用模板模式？
// 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 }
]
});
回答by Griffin
RE: "Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?"
RE：“在为每列使用自定义列标题模板之前，我可以采取另一种方法吗？或者更糟 - jQuery 操作呈现 DOM 的小部件？”
Invoke a wrapper function that returns a function, thus:
调用一个返回函数的包装函数，因此：
function createHeaderTemplate(columnName) {
return function() {
return "Custom: " + columnName;
};
}
...
...
columns: [
{ field: 'field', headerTemplate: createHeaderTemplate('My Field') },
{ field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]
