Getting Current Data from KendoUI TreeView

Question

I'm using a kendo UI tree with a remote data source from a JSON file. I have a button on the tree page which gets the current data of the tree,sends it through a POST to a server and the server saves the current data to the JSON file so as the next time I reload the page,the changes I made will be kept.That's what I want to happen.

So I know the current data of the tree is in:

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

Which means the data changes real time in there for example when someone drag and drops a node of the tree.

My problem starts when this data doesn't seem to change when I drag and drop nodes inside the tree,and only changes when I drag and drop a node on the root level of the tree and even then it doesn't do it correcly as the node should be moved in there as well but instead the node gets copied,leaving the past node in the tree as well...

For Example I have this tree:

If I make a drag and drop change like this:

And I send the data,save it and reload the change isn't made at all!

PS:Even when I view the current data after the change before sending it,I see that there is no change on the data at all even though I did a change visualy with a drag and drop.So it doesn't have to do with the sending,saving and the server.

On the other hand,if I make a change like this:

I can see in the current data that the moved node is added in the end of the data indeed but it is not deleted from it's initial position within the data!So if i send the current data to the server,save it and then refresh I get the result:

The code for viewing and sending the data is:

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 Bug or am I doing something wrong?Has anyone been able to see the current data changing correctly on every drag and drop?

Answer 1

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

Then, when you create the kendoTreeView you have to say something like:

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

Here the important is not using directly data array but wrapping it with kendo.observableHierarchy.

Then you will have the data updated with the result of drag & drops.

Answer 2

For me in addition to OnaBai answer I had to use the sync function on 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) => {

                }); 
        });



    }