1.1 Drag drop grid tree append leaf

[John Sourcer]

Hi All,

I have search and read the forum about dragiing and dropping to an existing leaf node but am going around in circles. The suggested option seems to be this post:

http://extjs.com/forum/showthread.php?t=5696&highlight=appending+leaf+node

Which suggests:
if you want a node that can contain children but has none yet.
try adding:

"children": [],
"expanded": true,

to the config of the nodes.

My tree is simply built as follows:

treeManufacturer = new Ext.tree.TreePanel('manufacturers-tree', {
animate: false
,loader: loader
,containerScroll: true
,rootVisible: false
,lines: false
,ddGroup: 'ddReclass'
,enableDrop: true
,ddAppendOnly: true

});

rootManufacturer = new Ext.tree.AsyncTreeNode({
draggable:false
,id:'treeManufacturer'
});

treeManufacturer.setRootNode(rootManufacturer);
treeManufacturer.render();
rootManufacturer.expand();


I am unsure how to implement the suggested solution.

[architect]

try to add
children: [] to your root definition

[John Sourcer]

Hi Architect,

I have tried this but it just gives me a blank tree.

Thanks for replying.

[architect]

You have just create a tree with a root node. You can add folder node or leaf node like this:
for leaf node

var newNode = new Ext.tree.TreeNode({
....


});
treeManufacturer.root.appendChild(newNode);


for folder node

var newNode = new Ext.tree.TreeNode({
....
children: [] // for folder node

});
treeManufacturer.root.appendChild(newNode);


here you append "newNode" to the root node

[John Sourcer]

OK! I am loading the tree with a tree loader. I want to be able to drag & drop from a grid to any level below root for re-classification purposes. It all works fine except when the node is a leaf node. At this stage I cannot drag and drop onto this node.

I have add
leaf: false,children:[] to my JSON where the leaf is actually true. Note I am not actually changing the structure of the tree but dragging and dropping from a grid to reclassify items depending on which node they were dropped on.

Why can I not drag & drop onto a leaf node?

[laluigino]

Hi John, I had exactly the same problem: a tree on which I can drop grid rows for re-classification purposes.

Reading this thread and the thread you linked in your first post, I've got an idea, so I played a little and found this solution:

1) in the treePanel configuration, put: "enableDrop: true", to prevent the elements to be dragged;
2) again, in the configuration of the root node and of all the "normal" nodes, put: "draggable: false, allowDrop: false";
3) in the confuguration of the "leaf" nodes, put: "expanded: true, allowDrop: true, childNodes: []";

Note : I omitted the "leaf: true" parameter, so the destination "leaves" will be like "normal" nodes (I can drop rows on them), but with no children.

That worked for me, I hope that it will work for you!

Please, let me know.

[John Sourcer]

Hey laluigino,

I read the threads on doing that but wasn't happy. So I scratched around a little deeper and overrode the isLeaf function to always return false. In my case I never actually append or modify the tree so this works well.

[cowabunga1984]

Hi John, I had exactly the same problem: a tree on which I can drop grid rows for re-classification purposes.

Reading this thread and the thread you linked in your first post, I've got an idea, so I played a little and found this solution:

1) in the treePanel configuration, put: "enableDrop: true", to prevent the elements to be dragged;
2) again, in the configuration of the root node and of all the "normal" nodes, put: "draggable: false, allowDrop: false";
3) in the confuguration of the "leaf" nodes, put: "expanded: true, allowDrop: true, childNodes: []";

Note : I omitted the "leaf: true" parameter, so the destination "leaves" will be like "normal" nodes (I can drop rows on them), but with no children.

That worked for me, I hope that it will work for you!

Please, let me know.

Hi,

I had to do this:

myTreeRoot.on('append', function(myTree, myBaseNode, myAppendedNode,
myIndex){
myAppendedNode.loaded = true;
var da = 'do';
});

to prevent a new Ajax-Request.

cowabunga! :D

[rnicholus]

All I needed to do was set "expanded" to true for all actual leaf nodes & set leaf to false for all nodes.