Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Herick on Oct 13, 2008 06:10
open dhtmlx forum
Some dificult with trees

Hello guys,

I'm having some problems to learn the dhtmlx Tree.
I need to create a Tree that follow some restrictions, and that same Tree needs to support Drag and Drop and the nodes will be adding with script.
The problem is: I have 4 types of data. 3 types have to be parent nodes, they can be reordened but one can't be put inside other node. The other type is only child, can be put only inside the 3 other nodes but never between they. They can be ordered too. Like this:

Type1
|_____Type4.1.1
|_____Type4.1.2
Type2
|_____Type4.2.1
Type3

So I can put the Type3 between Type1 and Type2, Type4.1.1 only inside Type2 or Type3, but never in the same level, it means that type4 never can have childs.
I need to know how put the on drop and move item methods to reorder and control what node can be put inside the other, and need to know how can I differentiate the type of the nodes.

Thank's!
Answer posted by Support on Oct 13, 2008 07:01
>> how can I differentiate the type of the nodes.
You can use two ways to store additional data 
userdata
        tree.setUserData(id,"type","typeA");
cell ( pro only, dhtmlxtree_attrs.js )
       tree.setAttribute(id,"type","typeA")

>>I need to know how put the on drop and move item methods to reorder and control 
You can use onDrag event for such purpose

tree.attachEvent("onDrag",function(sid,tid){
   var stype = tree.getUserData(sid,"type")
   var ttype = tree.getUserData(tid,"type")
// here you have types for both source and target items, you can use any custom rules here and return true when d-n-d must be allowed and false, when it must be blocked. 
});
Answer posted by Hérick on Oct 13, 2008 08:31

Ok, done.

But I can't reorder the nodes yet.. Any sugestion??

My code is:

function tondrag(id,id2){
    if((tree.getUserData(id,"info")=="visit")&&((tree.getUserData(id2,"info")=="route")||(tree.getUserData(id2,"info")=="veiculo")||(tree.getUserData(id2,"info")=="noAlocated")))
     return true;
    else
     return false;  
   };
  
   tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
   tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
   tree.enableDragAndDrop(true);
   tree.loadXML("treeTeste.xml");
   
   tree.setDragHandler(tondrag);

 

Answer posted by Support on Oct 13, 2008 08:49
By default tree uses "drag-as-child" mode , which not very useful in your case. 
You can switch to "complex" mode
      tree.setDragBehavior("complex"); // pro version required

In such mode d-n-d allows to drop as child or as sibling, based on drag position. 
The tondrag now will receive 3 parameters , third one is a sibling ID (null if item droped as child), which can be used to customize drop rules, when source ID and target ID is not enough.
Answer posted by Herick on Oct 13, 2008 10:09

So to add this functionality in my application I will need of the professional edition.

There's no problem, but I need to have the sure that it will work for my necessity. I was using another API called RIALTO and after the job done, she had a huge performance problem. So I'm looking for others and making some tests.

There's another way to evaluate this before buy the DHTMLX? I will understand if this won't be possible.

Anyway, thank's for the help.

 

Answer posted by Support on Oct 14, 2008 01:32
>>There's no problem, but I need to have the sure that it will work for my necessity
If you plan to use PRO version, and need to test its functionality - contact us at sales@dhtmlx.com, we can send you fully functional evaluation version. 

Look and feel of complex d-n-d can be checked here
http://dhtmlx.com/docs/products/dhtmlxTree/samples/drag_n_drop/pro_drag_complex.html?un=1223974471000