Retrieving Current Data from KendoUI TreeView

Question

I am using the kendo user interface tree with a remote data source from a JSON file. I have a button on a tree page that receives the current data of the tree, sends it via POST to the server, and the server saves the current data to a JSON file, since the next time I reload the page, the changes that I made will be saved. This is what I want.

So, I know that the current tree data:

$("#treeview").data("kendoTreeView").dataSource.data() 

This means that the data changes in real time there, for example, when someone drags and drops a tree node.

My problem starts when this data does not change, when I drag the nodes inside the tree and change only when I drag the node at the root level of the tree, and even then it doesn’t work, t do it correctly, since the node should also be moved there but instead, the node will be copied, leaving the node past in the past and node ...

For example, I have this tree:

If I do a drag, do the following:

And I send data, save it and reboot, no change at all!

PS: Even when I look at the current data after the change before sending, I see that there are no changes in the data at all, although I did a drag and drop visualization. So what she does not have to do with sending, saving and server.

On the other hand, if I make such a change:

In the current data, I see that the moved node is added at the end of the data, but it is not removed from its original position in the data! Therefore, if I send the current data to the server, save it and then update, I get the result:

Code for viewing and sending data:

 function sendData() { var req = createRequest(); var putUrl = "rest/hello/treeData"; req.open("post", putUrl, true); req.setRequestHeader("Content-type","application/json"); var dsdata = $("#treeview").data("kendoTreeView").dataSource.data(); alert(JSON.stringify(dsdata)); req.send(JSON.stringify(dsdata)); req.onreadystatechange = function() { if (req.readyState != 4) { return; } if (req.status != 200) { alert("Error: " + req.status); return; } alert("Sent Data Status: " + req.responseText); } } 

Is this a mistake or am I doing something wrong? Could anyone see that the current data changes correctly with every drag and drop?

Answer 1

First and foremost, you should use the latest version of KendoUI (Kendo UI Beta v2012.3.1024), which is still in beta, but where they have solved many problems.

Then, when you create kendoTreeView, you should say something like:

  tree = $("#treeview").kendoTreeView({ dataSource :kendo.observableHierarchy(data), dragAndDrop:true }).data("kendoTreeView"); 

What matters here is not using the data array directly, but wrapping it with kendo.observableHierarchy .

Then you will be updated data with the result of drag and drop.

Answer 2

For me, in addition to OnaBai's answer, I had to use the synchronization function in the save method. I am using Type Script.

  this.treeData = new kendo.data.HierarchicalDataSource({ data: kendo.observableHierarchy([]),//Thanks OnaBai schema: { model: { id: "MenuItemId", children: "MenuItemChildren", hasChildren: (e) => { //this removes arrow next to items that do not have children. return e.MenuItemChildren && e.MenuItemChildren.length > 0; } } } }); public save() { this.treeData.sync().done(() => { console.log("sync data"); var myType = this.treeData.view(); this.$http.post("/api/TreeViewPicker", myType) .then((response) => { }); }); }