Kendo UI grid update
username
I'm using a Kendo UI grid with a service that requires a POST request to update the row as a JSON string instead of a 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);
}
}
},
//...
});
But the body of the 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
Encoded json object ( {"Id": 1, "Foo": "foo", "Bar": "bar"}) (what encoding, btw?) plus form data.
Using jQuery directly works 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 it, but apparently, this hasn't worked since 2012 .
How do I get Kendo to post the correct data?
Peak encoding
It's not intuitive or well documented, but you want to call JSON.stringify()the parameterMapfunction:
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" }
}
}
}
});