Intestazione colonna UI Kendo Intestazione della funzione Campo non ha accesso alla definizione colonna

Question

Sto tentando di utilizzare la funzione columns.headerTemplate di un Kendo UI Grid per personalizzare l'intestazione della colonna. Si utilizza questa funzione come mostrato di seguito e come dimostrato da this example I created. Normalmente quando si utilizza Kendo UI templates, il widget passerà l'entità nella funzione modello in modo da poter utilizzare le varie proprietà per personalizzare l'html da rendere.

Debug del codice di rete UI di Kendo È possibile notare che nel metodo _headerCellText la chiamata alla funzione modello passa in un oggetto vuoto anziché nella colonna anche se l'oggetto colonna è nell'ambito.

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

C'è un altro approccio che posso prendere prima di ricorrere a modelli di intestazione colonna personalizzata per ogni colonna o nel male - la manipolazione jQuery del widget reso DOM?

C'è una buona ragione per deviare dal modello di modello comune nel framework per questo caso d'uso?

// 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: "C'è un altro approccio che posso prendere prima di ricorrere a modelli di intestazione di colonna personalizzata per ogni colonna o nel male - la manipolazione jQuery del widget reso DOM?"

richiamare una funzione wrapper che restituisce una funzione, quindi:

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

...

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