Question

• I’m working with the KendoUI version 2012.3.1114 with jQuery 1.8.2.
• I’m using MVC4 and my methods are routing throw a Controller on fetch and API Controller for post. These are working correctly and I’ve validated that the returned entity contains the correct populated values (Id, Sender, Subject)
• I’m NOT using the MVC razor version.

The Issue

The issue I’m having is my object is saved and is returned correctly, but when it’s passed through the kendo.web.min.js file on the “options.success” method, the Model doesn’t seem to populate the Id field with the new value.

Here is the js that is working with KendoGrid

dataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    dataType: 'json',data: options.data, url: 'messagesfetchmessages', cache: false,
                    success: function (result) {   
                        options.success(result);
                    }
                });
            },
            create: function (options) {
                options.data.Id = 0;
                debugger
                $.ajax({
                    dataType: 'json',data: options.data,type: "POST",url: '/api/messages',cache: false,
                    success: function (result) {
                        //var model = kendo.stringify(result)
                        debugger
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            },
        },
        batch: true,
        pageSize: 30,
        schema: {
                    data: "data",
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Sender: { validation: { required: true } },
                    Subject: { validation: { required: true } },
                }
            }
        }
});


$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 400,
    toolbar: ["create"],
    columns: [
        { field: 'Id', width: "10px" },
        { field: 'Sender', width: "50px" },
        { field: 'Subject', width: "50px" }
        { command: ["edit", "destroy"], title: " ", width: "210px" }],
    editable: "popup"
});

Here’s a couple screen shots of the results:

Here is the result returned from the successfull save

Below is a screen shot of the result after KendoUI calls ‘success’ and passes an object to the jquery deferred function (notice that the model Id is null):

success: function (t) {
    e.resolve({
        response: t,
        models: n,
        type: i
    })
},

Surprisingly, banging my head against the keyboard only hurts the keyboard….any pointers would greatly be appreciated!

Answer 1

The issue ended up being how the schema was defined. Since I had set the schema data results to be returned as “data” in the following. All results must be returned the same way for the bindings to work.

    var schema  = {
        data: "data",
        total: 'total',
        model: MessageModel,
        //http://docs.kendoui.com/api/framework/datasource#schema-object
        errors:  function(e,a,b) {                    
            if(e && e.responseText){
                alert(e.responseText);
                debugger
            }
        },
        parse: function(response) {
            if(!response.total){
                debugger
            }
            //response.data.DateCreated = new Date();
            return response;
        },
        batch: false,
        gridcolumns: columns
    }

So, on the success function from the post, the code looks like this:

success: function (result) {
    options.success({
        data: result
    });
}