Bind Kendo Grid with Knockout: will config in javascript work with

Question

I've seen a few examples of binding kendo grid using knockout where the grid configuration is defined in the viewmodel. I really like this style and the clean markup that it permits. However, I can't seem to get the usekotemplates option to work.

Here's my markup:

<div data-bind='kendoGrid: gridConfig'></div>
<script id="clientRowTemplate" type="text/html">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: State"></td>
        <td>
            <input type="hidden" data-bind="value: Id" />
            <a href="#">Edit</a>
            <a href="#">Delete</a>
        </td>
    </tr>
</script>

Here's my View Model

var clientListViewModel = function () {

    var self = this;
    self.clients = ko.observableArray([]);

    self.load = function () {
        for (var i = 0; i < 9; i++) {
            var c = new clientModel();
            c.Id = i;
            c.Name = 'Name' + i;
            c.State = 'NY';
            self.clients.push(c);
        };
    };

    self.gridConfig = {
        data: self.clients,
        datasource: {
            data: "data",
            schema: {
                model: {
                    fields: {
                        ID: { type: "number" },
                        Name: { type: "string" },
                        State: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true
        },
        height: 400,
        pageable: true,
        selectable: "row",
        usekotemplates: true,
        rowtemplate: "clientRowTemplate",
    };

};

var clientModel = function () {
    var self = this;
    self.Id = ko.observable(0);
    self.Name = ko.observable("").extend({ required: true });
    self.State = ko.observable("").extend({ required: true });
};


var vm = new clientListViewModel();
vm.load();
ko.applyBindings(vm);

Here's a jsfiddle: http://jsfiddle.net/Steve5877/a4kG7/2/

Can I bind it this way and still use templates?

RP Niemeyer RP Niemeyer · Accepted Answer · 2014-07-11T01:38:54

Looks like you just need to watch the case sensitivity for a couple of the options that you are passing:

    useKOTemplates: true,
    rowTemplate: "clientRowTemplate",

rather than:

    usekotemplates: true,
    rowtemplate: "clientRowTemplate",

Bind Kendo Grid with Knockout: will config in javascript work with

1 Answers