Kendo Observable.toJSON() not returning complete object

Question

I have a Kendo Observable object which contains SharePoint site and folder metadata. I tried adding site objects by using dot notation and the provided Observable.set() method.

They get added to the object, when I check the object, the new site object really gets added to the Observable. But when I call toJSON I only get the initial Observable that was created on page load.

var folder = {
    Id: 0,
    SharePointSite: site,
    RelativeUrl: "",
    IsActive: true
};

configuration.Sites[siteIndex] = site;
configuration.Folders[folderIndex] = folder; <- plain JS object

configuration.set(`Sites[${siteIndex}]`, site);
configuration.set(`Folders[${folderIndex}]`, folder); <- creates Observable object

loadPartialView($("#sites"), siteOverviewUrl, configuration.toJSON(), siteOverviewLoaded);

I create the folder object myself, the site object is serialized from a form that the user submits. Both get added to the Observable, both are not present after calling configuration.toJSON(). Configuration is my root Observable.

Thank you in advance.

Answer 1

Kendo Observable continues to update itself, if values are properly modified using set.

However, If JSON conversion is performed, The plain JSON object is returned, which is no more an observable. So, any further changes made to the root observable are not reflected to that JSON object or bindings performed with that JSON.

Hope this code snippet will help and see this demo

var observable = new kendo.data.ObservableObject({ name: "John Doe" });
observable.set("age", "30");
var a = observable.toJSON();

observable.set("height", "6");

console.log("observable", observable); // outputs "Observable"
console.log("json", a); // outputs "JSON"