Kendo UI grid update

Question

I'm using a Kendo UI grid with a service that requires the POST request for updating a row to be a JSON string instead of an URL encoded form.

My grid dataSource configuration looks like this:

dataSource: new kendo.data.DataSource({
    transport: {
        read: "/Service.svc/instructors",
        update: {
            url: "/Service.svc/instructors",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: function (data) {
                return kendo.stringify(data);
            }
        }
    },
    //...
});

However the body of request ends up looking like this:

0=%7B&1=%22&2=I&3=d&4=%22&5=:&6=%20&7=1&8=,&9=%20&10=%22&11=F&12=o&13=o&14=%22&15=:&16=%20&17=%22&18=f&19=o&20=o&21=%22&22=,&23=%20&24=%22&25=B&26=a&27=r&28=%22&29=:&30=%20&31=%22&32=b&33=a&34=r&35=%22&36=%7D&Id=1&Foo=foo&Bar=bar

An encoded json object ({"Id": 1, "Foo": "foo", "Bar": "bar"}) (what encoding is it, btw?) plus the form data.

Doing it directly with jQuery works just fine:

$.ajax({
    type: "POST", 
    url: "/Service.svc/instructors", 
    data: kendo.stringify({Id: 1, Foo: "foo", Bar: "bar"}),
    contentType:"application/json; charset=utf-8",
    dataType: "json",
    success: function(data) { console.log(data);}
});

According to the documentation, I should be able to set update as a function and call that, but apparently this hasn't work since 2012.

How can I make Kendo post the correct data?

Regarding the last sentence: According to the documentation, I should be able to set update as a function and call that, but apparently this hasn't work since 2012. It is documented that you have to use consistent definition for all CRUD methods, either a URL or a method but you cannot mix them. — OnaBai
I've tried implementing read and update and empty functions for create and delete and read is not called at start. What would be the default function to call for read, create and delete? — user3557327
It is working now. Please post it as an answer to mark it as resolved. I still would like to see what would the default functions for each action be. — user3557327

CodingWithSpike CodingWithSpike · Accepted Answer · 2014-07-19T03:02:35

Its not intuitive or well documented, but you want to call JSON.stringify() in the parameterMap function:

var productsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Products"
        },
        update: {
            type: "POST",
            url: "/Products/Edit",
            dataType: "json",
            contentType: "application/json"
        },
        parameterMap: function(data, operation) {
            if (operation === "update" || operation === "create") {
                return JSON.stringify({product: data});
            }
            return data;
        }
    },
    schema: {
        model: {
            id: "ProductID",
            fields: {
                Name: { type: "string" },
                ListPrice: { type: "number" },
                SellStartDate: { type: "date" }
            }
        }
    }
});

Kendo UI grid update

2 Answers