Kendo UI dataSource sync on button - kendo-ui

Question

i have kendo ui datasource sync.
Here is the link: http://jsbin.com/uhamer/3/
When you click on list, article will show in grid list(down), then if you click again on same article, it will increse quantity +1.
In that new dataSource that should be synced, schema.model.id is set to id.
When i click on Send data button, it shows me error.
Firebug:
TypeError: r is undefined
Chrome:
Uncaught TypeError: Cannot read property 'data' of undefined
What am i doing wrong here?
Thanks.

Answer 1

I'm not sure if this is part of your error, but with the Kendo UI DataSource it only considers the record to be "new" if its ID column is set to the default (0 since it is a number column). When you copy the row over to the new DataSource you are also copying the ID, so now Kendo thinks that the server already knows about this record since it has an ID.
You can see this by adding a record to your grid's DataSource, then running this JS in the console:
gridNewData.data()[0].isNew(); // returns false because the id column is not 0
When you call .sync() it looks for new records to push to the server but finds none.
You may want to consider having 2 different IDs here; one that is the ID of the Article, and one that is the ID of the DB row (Kendo expects the specified ID column to be the unique DB row ID)
for example:
var gridNewData = new kendo.data.DataSource({
...
schema: {
model: {
id: "id",
fields: {
id: { type: "number" }, // unique DB row ID
articleid: { type: "number" }, // article's ID
name: { type: "string" },
quantity: { type: "number" },
price: { type: "string" }
}
}
}
...
});
Then copy the article's ID into the grid's Article ID:
if (have_in === false) {
gridData.add({
id: 0, // leave this set to 0 or undefined, so Kendo knows it is new.
articleid: addData.id, // copy article's id to new row's articleid
name: addData.name,
quantity: 1,
price: addData.price.toFixed(2),
});
}
I edited your jsbin and you can view it here. Now when the "send data" button is clicked Kendo does a POST of the JSON data:
[{"articleid":1,"name":"Article 1","quantity":2,"price":"20.00","id":0}]
Also note that on the server side, the server should insert this new record into the DB then respond with JSON of the same records but with the "id" set to a non-zero value. For example if the server does a SQL INSERT into a table, that table would probably have some kind of auto generated sequence for the ID column, so if it was created with ID 123, then the server should send an HTTP response with the data:
[{"articleid":1,"name":"Article 1","quantity":2,"price":"20.00","id":123}]
Kendo DataSource will then insepct the HTTP response, fetch that id:123, and update the previously added record in the DataSource to have that id of 123. From that point the record is no longer "new" since its ID is not 0 or undefined, so additional calls to .sync() will not try to send that same record to the server again.
(if the server does not send a response with an id set for the new record, then Kendo will leave the id of the record int he DataSource set to 0, so each time you click "send data" it will keep sending that record over and over)