Nagłówek kolumny tabeli UI Kendo Funkcja szablonu nie uzyskuje dostępu do definicji kolumny

Question

Próbuję użyć funkcji columns.headerTemplate z Kendo UI Grid, aby dostosować nagłówek kolumny. Używa się tej funkcji, jak pokazano poniżej i jak wykazano przez this example I created. Zwykle podczas korzystania z Kendo UI templates widżet będzie przekazywał encję do funkcji szablonu, aby można było użyć różnych właściwości, aby dostosować html do renderowania.

Debugowanie kodu siatki Kendo UI Widzę, że w metodzie _headerCellText wywołanie funkcji szablonu przechodzi w pustym obiekcie, a nie w kolumnie, mimo że obiekt kolumny znajduje się w zasięgu.

text = kendo.template(template, settings)({});

Czy istnieje inne podejście mogę podjąć przed uciekania się do niestandardowych szablonów nagłówku kolumny dla każdej kolumny lub gorzej - manipulacji jQuery widgetu świadczonych DOM?

Czy istnieje dobry powód do odstąpienia od wspólnego wzorca szablonu w ramach tego przypadku użycia?

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

Answer 1

RE: „Czy istnieje inne podejście mogę podjąć przed uciekania się do szablonów niestandardowych nagłówków kolumn dla każdej kolumny lub gorzej - jQuery manipulacja widget świadczonych DOM?”

Wywołanie funkcji otoki, która zwraca funkcję, a więc:

function createHeaderTemplate(columnName) { 
    return function() { 
     return "Custom: " + columnName; 
    }; 
} 

...

columns: [ 
    { field: 'field', headerTemplate: createHeaderTemplate('My Field') }, 
    { field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') } 
]