DataSource Update/Edit destroy methods

[Anil]

To add an element to a kendo data source i used the .add() method. Similarly i want to update and remove an element in the data source.

I looked through the documentation for the data source and could not find .update()/.edit()/.destroy() methods. Can you please advise.

[Kiril Nikolov]

Hi Anil,

In Kendo UI the dataSource array is built from Models. The Model inherits from the ObservableObject and extends it with the ability to define schema - fields and methods. What I mean here is that in order to edit/update a given dataSource item you need to use the set method (not to assign the value with "=" operator).

Here is an example:

var observable = new kendo.data.ObservableObject({ name: "John Doe" });
observable.set("name", "Jane Doe"); // set the value
console.log(observable.get("name")); //outputs the new value "Jane Doe"

In regards to the destroy method that you are looking for - Kendo UI DataSource has a built-in method remove(), that can give you the same results. Read more about it here:

http://docs.kendoui.com/api/framework/datasource#methods-remove 

More information about Kendo UI ObservableObject and Model can be found on the following links:

http://docs.kendoui.com/api/framework/observableobject

http://docs.kendoui.com/api/framework/datasource

Regards,
Kiril
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

[Anil]

Thank you Kiril, I think the approach you suggested changes local data. In my case the data source points to a remote source and it is not a local connection. The add() method in turn calls the create method in transport which calls my asp.net mvc controller. The read() method in turn calls the read in transport. Can you tell me methods that will in turn call the "update" and "destroy" in transport.

Please find my code for configuring my data source below

//define the data source
var districtsDataSourceFn = function (createUrl, readUrl, updateUrl, destroyUrl) {
return new kendo.data.DataSource({
pageSize: 10,
schema: {
data: "Data",
total: "Total",
model: districtDataModel
},
transport: {
create: { url: createUrl, type: "POST" },
read: { url: readUrl, contentType: "application/json", type: "POST" },
update: { url: updateUrl, type: "POST", complete: function (jqXHR, textStatus) { districtsDataSource.read();} },
destroy: { url: destroyUrl, type: "POST" },
parameterMap: function (data, operation) {
debugger;
if (operation !== "read") {
var result = {};

for (var member in data) {
result["districts[" + 0 + "]." + member] = data[member];
}

return result;
} else {
var result = {};
result["isActive"] = tabVM.get("isTabActive");
return JSON.stringify(result)
}
}
}
});
}

//Code to add the object
this.get("districtsSource").add(this.get("districtLookup"));

[Kiril Nikolov]

Hello Anil,

In order to save any local data item changes you need to call the sync() method on your DataSource like this:

dataSource.sync()

 The sync method will request the remote service only if there are any pending changes in the data source. More information about the sync() method can be found here:

http://docs.kendoui.com/api/framework/datasource#methods-sync

Regards,
Kiril
Telerik