Drag-and-drop to Tree

I’m using DHTMLX 4.1 and I have issue with drag and drop functionality from DataView to Tree.

I added the below in the beginning of all scripts.


Part of tree definition:

tree.enableDragAndDrop(true,true); tree.attachEvent('onDrop', function(sId,tId,id,sObj,tObj){ console.log(tObj);});

DataView definition:

dhtmlx.Type.add(dhtmlXDataView,{ name:"ficons", template:"#image##filename#", height: 150 });

dhxDView = dhxLayout.cells("b").attachDataView({type: "ficons",drag: true}); dhxDView.attachEvent('onItemDblClick',function(rId){openFileWindow(rId);}); dhxDView.attachEvent('onItemClick',function(rId){alert(rId);});

Unfortunately after droping the item from DataView to Tree I receive the following error:

TypeError: s.parentObject is undefined ...this.openItem(v.id);var g=s.treeNod;var o=s.parentObject.childsCount;var q=s.par...

Could you provide a direct link to the project or completed demo on support@dhtmlx.com with link to this topic?
docs.dhtmlx.com/auxiliary_docs__ … pport.html
We need to test and inspect the whole structure


complete demo is available here: dev.blesksoft.pl/demo/

You can try to drag’n’drop from dataview to tree’s subfolder.

Please, place there debug files of 4.1.1 version (you can download it by the same link you’ve download current version)
Guide of debug files creation:
docs.dhtmlx.com/tutorials__auxil … piler.html


how to do it on Linux/Unix system? I am not using windows machine at all so I cannot run .bat file as described in the manual you provided.

You need to exec ‘php lib_compiler.php --debug=true’ from command line then


ready, please verify what is neccessary.


please attach js code also, like


corrected this. Appologies.

Any update on this?


Your code is correct, but it is missing one peace.

While drag-n-drop between dataview and tree is correctly detected, components can’t handler the result of such d-n-d. ( there are too many ways how item must be added as result of drag-n-drop)

dhtmlx.com/docs/products/dhtmlxD … _tree.html

This is example of d-n-d between dataview and tree. As you can see there are extra event handlers - onDrag for the tree and onBeforeDrop for the dataview. They define the logic of data moving when drag-n-drop occurs. Without them components will recognize the d-n-d but will not be able to process it correctly.

As I need only dataview to tree dnd I added the requested logic to the application. The link to the demo reamins the same and the error is:

TypeError: itemObject.parentObject is undefined var c=itemObject.parentObject.childsCount;
It seems to me that it’s still the same. Please verify.

Problem still in the code.
You have

tree.attachEvent('onDrop', function(sId,tId,id,sObj,tObj){ if(sObj.object && sObj.object == dhxDView) { if(tId != 0) tree.insertNewNext(tId,sId,dhxDView.get(sId).Package ); else tree.insertNewChild(tId,sId,dhxDView.get(sId).Package ); dhxDView.remove(sId); return false; } return false; });

but it must be

tree.attachEvent('onDrag', function(sId,tId,id,sObj,tObj){

The name of event is really confusing, but it is onDrag, not onDrop ( due to backward compatibility reasons, we can’t change it in the library )