Problems with drag and drop and adding new nodes using remote data source with treeview

[marnor]

Hi!

I am implementing a treeview using HierarchicalDataSource. When I expand a node in the tree the tree is making a request to the server and the tree is populated with the retrieved children. The dataSource is set to be updated on dataSource.sync() when a user clicks a save button using a batch update.

// Add nodes problem
One of my problems is that I don't know how to add nodes to the tree and datasource. E.g. to a node, three steps down in the hierarchy. I am not sure I am doing this right.

If I do dataSource.add(node)
The node is added at the very end of the root which seems right. But how do I add a node to a specific place in the tree?

I have tried dataSource.insert(index, node) but it does not seem to work. What is this index? It seems like the data items existing in the dataSource has an index related to their parent, not a global index, i.e. there are multiple 0 indexes in the tree. Or has my treeview been built in a wrong way? I have tried with different indexes without success.

If I use treeView.append()/insertBefore/insertAfter the node is added to the tree but when i call dataSource.sync() they are not pushed to the server using the transport.create. I guess this is expected behavior since the dataSource does not know about these changes.

How should this be implemented?

// Drag drop problem
When I rearrange nodes using drag and drop and then do a dataSource.sync() the drag and drop changes seems to be sent as transport.destroy. Is this expected behavior? I would rather want an transport.update action.


Regards,
/ Mårten

[Alex Gyoshev]

Hello Mårten,

Synchronization of the HierarchicalDataSource is currently not supported, but is already on our radar. Theoretically, you should be able to synchronize it by calling sync() on all nested datasources, but we have not tried it out.

Kind regards,
Alex Gyoshev
the Telerik team

[marnor]

Oh. No wonder I didn't get it to work :) Since HierarchicalDataSource "extends" DataSource I thought sync function would work.

I have also thought it was only one dataSource responsible for getting all items. How do I loop over the dataSources calling sync for everyone? It would be super if you could provide an example since I am not quite following. 

[marnor]

I have created a function which seems to work. Maybe someone else is interested or maybe you can have a look Alex?

$("#save-button).click(function() {

  syncAll(dataSource);

});

 

function syncAll(hierarchicalDataSource) {   

    hierarchicalDataSource.sync();

    if(hierarchicalDataSource._data.length > 0) {       

        var nrOfChildren = hierarchicalDataSource._data.length;

        for(var i=0; i<nrOfChildren; i++) {

           var node = hierarchicalDataSource.view()[i];

           if(node.hasChildren) {

               syncAll(node.children);

            }

        }

    }      

 }

However I have still problem with drag and drop. Even if I drag a node within the same level. It only triggers a transport.delete action. Should this work with remote hierarchical datasource?