Kendo UI Grid column headerTemplate function does not get access to the column definition
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') }
]
Comments
-
ANISH S NAIR almost 2 years
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 } ] });
-
OnaBai over 9 yearsDid you check this with Telerik Support? Your argument seems consistent: an empty argument is not very useful, better sending the column object.
-
CodingWithSpike over 9 yearsEqually as confusing is that the actual code is:
if (type === FUNCTION) { text = kendo.template(template, settings)({});
so they callkendo.template()
only if the template is a function, but the docs forkenod.template()
state that only a string is a valid parameter. docs.telerik.com/kendo-ui/api/framework/kendo#methods-template If this was in the open-source portion of Kendo I would log an issue and sent a pull request to fix this up, but it looks like something you should raise to actual Kendo support. -
Brett over 9 yearsIt is from my understanding that the behavior you are getting is working as intended. They don't want to pass you the column object. Why they chose this? Idk.
-
ANISH S NAIR over 9 years@OnaBai - I haven't raised it with support yet as the source code is pretty conclusive and this post was mainly for my future reference. The Telerik Forums interface is painfully slow to use in comparison to StackOverflow so I was hoping they monitor here as well :-)
-
ANISH S NAIR over 9 years@CodingWithSpike - yes the Grid is not part of Kendo UI Core so is not open source. Also I think I would need a better understanding of the code base to implement a good solution that is consistent with the framework. If you look further down in the code you can see the implementation for the footer template is quite different to support display of grouping information.
-