I am having trouble saving changes using to the server using Kendo UI Listview.
The DataSource is configured like this:
var listViewDataSource = new kendo.data.DataSource({
transport: {
read: {
url: MyServiceURL
},
update: function() {
console.log("test"); // I expected to enter this function
// when the user changes data on the
//client, never happens
}
},
schema: {
Id: "Id",
fields: {
DeptName: {
editable: false,
},
HourRate: {
type: "number",
editable: true
},
ShowOnSavings: {
type: "boolean",
editable: true
},
ShowOnTechnicalCosts: {
type: "boolean",
editable: true
},
ShowOnOtherCosts: {
type: "boolean",
editable: true
}
}
},
sync: function (e) {
console.log("item synched"); //This should be fired after the
// updated data is sent, never
//happens
}
The ListView is initialised like this:
kendo.bind($("#listview-container"), {
listViewDataSource: listViewDataSource,
onItemSaved: function (e) {
console.log("item saved"); // fired every time the user changes
//an item, as expected
}
})
The ListView properly loads the data. When the user edits an item the change is visible locally (after leaving edit mode) and the save event is fired, as expected.
However the changes are never synchronized with the server, my update method is never called and no network activity is never called.
The documentation on the ListView save method states the following:
Saves edited ListView item. Triggers save event. If save event is not prevented and validation succeeds will call DataSource sync method.
As I don't call preventDefault
on the save event I expect the data sourve to sync, however this does not happen. Calling dataSource.sync()
manually does not help either.
I am puzzled why this does not work. Any tips appreciated.
I skipped one level of nesting in the model configuration, model was missing
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "number",
editable: false
},
DeptName: {
type: "string",
editable: false
},
HourRate: {
type: "number",
editable: true
},
ShowOnSavings: {
type: "boolean",
editable: true
},
ShowOnTechnicalCosts: {
type: "boolean",
editable: true
},
ShowOnOtherCosts: {
type: "boolean",
editable: true
}
}
}
}