Tree Manipulation Question

Webix JS
#1

Hello, I have an editable tree component, defined with the ‘save’ parameter to handle server side (storage) operations of add/remove/update(rename) actions. All working fine. Am i correct in my understanding of the documents, that i need to define a separate ‘DataProcessor’ in order for the backend to receive Drag and Drop event notifications, or implement specific ajax calls in the onAfterDrop callback?
It seems the existing ‘save’ URL would not (does not) receive the DnD notifications, is that correct?
Any pointers or insights would be most welcome
Thanks, -SvrSide

#2

Hello,

You don’t need to define a separate DataProcessor for tracking drag-n-drop operations as you provide the necessary settings, trackMove, right in the tree constructor.

view:"tree",
save:{
     url: url,
     trackMove:true
}

The save property implicitly defines a Dataprocessor while the above notation allows configuring it. By default trackMove is switched off.

#3

Hello Helga, The suggestion above resolved the issue (thank you) but now i have a slightly different but related issue I’m hoping you might be able to assist with. The tree works fine - folders can be created and nodes dragged into them to arrange as desired. The information in the tree is also rendered in much greater detail in a datagrid. Selecting a node in the tree defines what is presented in the grid/data table - so selecting a node renders details of that node and selecting a folder renders details of all the nodes within that folder.

Now the tree can get quite long so dragging nodes around to arrange them into folders is laborious with lots of scrolling. As the information that is used to render the nodes in the tree is also in the datagrid, I want to filter on the datagrid so that only the relevant rows are visible, and then DnD those items from the datagrid to the correct folder in the tree – without actually moving or copying anything out of the datagrid. I just want logic associated with the tree to simply “understand” the nodes selected and move those selected nodes from their current position in the tree to the target folder.

I’ve read everything I can find in the documents and forums but i can’t work out how to get hold of the details of dragged row(s) in either the onAfterDrop or onBeforeDrop to accomplish this. Can you possibly point me in the right direction?
Thanks -SrvrSide

#4

Hi,

It is possible to implement your use-case through the recommended trackMove property. This property triggers data saving operation not only for native drag-n-drop operation but from API move command as well.

So, you can have the onBeforeDrop event handler on a tree, which will return false, as you need not move an item from a grid into a tree. Same handle can call tree.move API with necessary parameters. This move command will be caught by data processor and info about moved items will be sent to a server-side script.