Question

I am using knockout.js with Kendo-UI.
I have this grid model:

var GridModel = function (options) {
        function GridItem(item) {
            return { Id: item.Id() || '', Description: item.Description() };
        }

        $.extend(this, {
            data: ko.observableArray(),
            gridOptions: {
                pageable: true,
                pageSize: 5,
                sortable: true,
                scrollable: false,
                selectable: true,
                columns: [
                        { field: 'Id', title: 'title1', width: '80px', groupable: false },
                        { field: 'Description', title: 'title2', width: '200px', groupable: false }
                ]
            }
        });

        this.addItem = function (item) {
            this.data.push(new GridItem(item));
        }
    };

This is my markup:

<div id="GridDiv" data-bind="kendoGrid: data, gridOptions: gridOptions"></div>

This is how I apply the binding:

ko.applyBindings(new GridModel(), $('#GridDiv').get(0));

For some reason the titles of the columns are not binded and instead of title1 and title2, I get Id and Description.
Moreover, if I replace this.data.push(new GridItem(item)); with this.data.push(item); then instead of 2 columns, I get 10 columns (because item contains 10 members).

Why doesn’t the binding work correctly?

Update:
I added a jsfiddle http://jsfiddle.net/mTqdE/14/ but somehow it doesn’t work.. any idea?

Answer 1

They have an example how to correctly pass additional options with Knockout bindings:

Here’s working example:

<div id="GridDiv" data-bind="kendoGrid: gridOptions"></div>
<button data-bind="click: addRandomItem">add</button>

And pass data as a grid option.