Kendo UI Grid column headerTemplate function does not get access to the column definition

Question

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 }
    ]
});

Did you check this with Telerik Support? Your argument seems consistent: an empty argument is not very useful, better sending the column object. — OnaBai
Equally as confusing is that the actual code is: if (type === FUNCTION) { text = kendo.template(template, settings)({}); so they call kendo.template() only if the template is a function, but the docs for kenod.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. — CodingWithSpike
It 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. — Brett
@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 :-) — Martin Hollingsworth
@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. — Martin Hollingsworth

Griffin Griffin · Accepted Answer · 2014-11-13T17:24:00

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') }
]

Kendo UI Grid column headerTemplate function does not get access to the column definition

1 Answers