KendoUI Grid - MVVM Bindings - object Object] has no method 'isNew'

Question

I have a KendoUI grid which I'm using with MVVM bindings. I also have a UI where a user can enter data and select an Add button. Upon pressing the add button the new data is added to the model. The grid is set to Autosync.

The problem I have is that once a new item is added I get an error "[object Object] has no method isNew"

My grid is as follows:

      $("#objJoinGrid").kendoGrid({
        dataSource: {
            transport: {
                create: function (operation) {
                    operation.success();
                },
                update: function (operation) {
                    operation.success();
                },
                destroy: function (operation) {
                    operation.success();
                },
                read: function (operation) {
                    operation.success(datasetMetaModel.joinList.ObjectList);                        
                }
            },
            schema: {
                model: {
                    id: "JOIN_OBJECT_ID",
                    fields: {
                        JOIN_OBJECT_ID: { type: "number" },
                        JOIN_OBJECT_NAME: { type: "string" }                            
                    }
                }
            },
            autoSync: true
        },
        height: 220,
        columns: [
            { field: "JOIN_OBJECT_ID", width: "130px" },
            { field: "JOIN_OBJECT_NAME", width: "130px" }        
        ]            
     });

I then bind my model to the grid:

   datasetMetaModel = kendo.observable({
        joinList: datasetModel.JoinStructure,
    });

    kendo.bind($("#areaDiv"), datasetMetaModel);

And in the click event of the Add button:

$("#addDataset").bind("click", function () {
    var dropdownlistPO = $("#objectListing").data("kendoDropDownList");

    datasetMetaModel.joinList.ObjectList.push({
        JOIN_OBJECT_ID: dropdownlistPO.value(),
        JOIN_OBJECT_NAME: dropdownlistPO.text()
    });
});

In this instance datasetModel.JoinStructure is an empty array which comes from the server. The odd thing is that if I actually add one entry to the server then everything works, I can add new items without issue. Any ideas? I'm guessing it's something to do with how I'm adding the new item.

If I disable AutoSync I can then add successfully to the grid. However the error reappears when I call grid.sync(). This is really odd behaviour, I cannot see what the issue could be with my code. A Kendo bug maybe? — keitn

Petur Subev Petur Subev · Accepted Answer · 2013-09-25T17:55:35

Try to change your create to actually return the newly created record. e.g.

create: function(e) {
        var item = e.data;
        item.Id = data.length + 1;
        e.success(item);
    }

Here is live example that should be pretty similar to yours.

http://jsbin.com/iDeloNo/1/edit

KendoUI Grid - MVVM Bindings - object Object] has no method 'isNew'

1 Answers