Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 }
    ]
});
like image 331
Martin Hollingsworth Avatar asked Aug 28 '14 08:08

Martin Hollingsworth


1 Answers

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') }
]
like image 117
Griffin Avatar answered Sep 23 '22 10:09

Griffin