I'm trying to use the columns.headerTemplate feature of a Kendo UI Grid to 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.
Debugging the Kendo UI Grid code I can see that in the _headerCellText
method the call to the template function passes in an empty object rather than the column even though column object is in scope.
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?
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 }
]
});
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?"
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') }
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With