Knockout-Kendo Header Template Binding Context

Question

For one of my Kendo UI Grids, I've specified a headerTemplate for a specific column. However, there doesn't seem to be any binding context in the template. I tied adding

<span data-bind='text: ko.toJSON($data)'></span>

to the template but nothing was rendered.

The grid is configured in the viewmodel using

self.gridConfig = {
    data: self.Transactions,
    height: 350,
    pageable: {
        pageSize: 5
    },
    useKOTemplates: true,
    rowTemplate: "exportRowTemplate",
    columns: [{
        title: "Policy Number",
        width: 120
    }, {
        title: "Insured Name",
        width: 250
    }, {
        title: "Effective Date",
        width: 120,
        format: "{0:MM/dd/yyyy}"
    }, {
        title: "Transaction Type",
        width: 150
    }, {
        title: "Premium",
        format: "{0:c2}",
        width: 120
    }, {
        headerTemplate: "<strong>Select</strong><span style='margin-left: 10px'><input type='checkbox' data-bind='checked: checkAllValue' /></span><span data-bind='text: ko.toJSON($data)'></span>"
    }]
};

How do I bind the control that is in the headerTemplate?

score 1 · Answer 1 · answered Nov 14 '14 at 22:56

You can do this by removing the knockout binding from the head of the table and then rebinding it on the databound event of the grid.

Here is a JSFiddle that shows an example: http://jsfiddle.net/ek1qkxth/

All you have to do to fix yours is to add this to your gridConfig settings:

dataBound: function (e) {
    var header = e.sender.thead[0];
    ko.cleanNode(header);
    ko.applyBindings(self, header)
}

Here it is in your gridConfig:

self.gridConfig = {
    data: self.Transactions,
    height: 350,
    pageable: {
        pageSize: 5
    },
    useKOTemplates: true,
    rowTemplate: "exportRowTemplate",
    dataBound: function (e) {
        var header = e.sender.thead[0];
        ko.cleanNode(header);
        ko.applyBindings(self, header)
    },
    columns: [{
        title: "Policy Number",
        width: 120
    }, {
        title: "Insured Name",
        width: 250
    }, {
        title: "Effective Date",
        width: 120,
        format: "{0:MM/dd/yyyy}"
    }, {
        title: "Transaction Type",
        width: 150
    }, {
        title: "Premium",
        format: "{0:c2}",
        width: 120
    }, {
        headerTemplate: "<strong>Select</strong><span style='margin-left: 10px'><input type='checkbox' data-bind='checked: checkAllValue' /></span><span data-bind='text: ko.toJSON($data)'></span>"
    }]
};

Knockout-Kendo Header Template Binding Context

1 Answers1