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?

Answer 1

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" }
            }
        }
    }
});