How to make Drag&Drop in tree widget working? (Apex 19.2)

John like many others

Hello

I'm working with the tree widget of Apex to display a tree after page load (Apex 19.2). This is all working fine. Now I want to allow the users to drag&drop tree nodes inside the tree. I checked/followed the doc of Apex 19.2 API:

Enable drag&drop in treeView:

var tree = $( "#HIERARCHYTREE_tree" );

// Get adatapter data

var adapter = tree.treeView( "getNodeAdapter" );

// Get drag option state

console.log (tree.treeView( "option", "dragAndDrop" ) );

// Output: false

// Enable drag in treeView

tree.treeView( "option", "dragAndDrop", true );

// Check if it's set now

console.log (tree.treeView( "option", "dragAndDrop" ) );

// Output: true

-> So far, so good in/for treeView. Furthermore the doc mentions this:

If true drag and drop is supported. The treeNodeAdapter must also support drag and drop.

Ok, switching to to AdapterNode documentatin where I can't find drag related setter functions, only two getter functions:

• allowDrag (true if allowed, else false)
• dragOperations (type of possible operations)

I can check the states:

allowDrag shows me "false", dragOperations shows me {normal: "move", ctrl: "copy"} on any node in the tree.

Questions: Now I wonder how I can enable the drag operation on Adapter level after the tree was generated? How can I remove the "copy" operation (I only want to allow "move")?

As I need to update the tree in the background in the DB as well I need to be able to react on move-drag operations. Based on the documentation I tried this (similar way as I react on selectionChange when user clicks on an element in the tree and the event fires as it should):

// Page load event:

var tree = $( "#HIERARCHYTREE_tree" );

//The way I have implemented selectionChange and is working:

tree.on( "start", function( event, ui ) {

  alert ("drag start");

} );

-> Uncaught TypeError: apex.da.initDaEventList is not a function

// Trial 2:

tree.on( "treeviewstart", function( event, ui ) { // also tried 'treeviewStart' and just 'start' instead of 'treeviewstart'

  alert ("drag start");

} );

In case of 'Trial 2' nothing happens (no alert message) while dragging.. I don't know how the drag visually should look like if there is any (do I see the grabbed tree moving?) or it's simply not working/firing because it's not activated on TreeNodeAdapter level?

I also tried to find any example of drag&drop operation in the Internet but couldn't find them for Apex. So before spending more hours on trying to make it work I come to this place in hope someone can confirm me drag&drop operation is working in Apex tree widget and even better: a simple code sample.

Thank you

John

User_PUZJ8

John,

I have a similar use case and am struggling with it. Where you able to solve the issue?

Dhawal

John like many others

No. I've created some separate functionality where the user can select what element to move and then where to move. That was also followed by some hassle. After knowing all that I would have chosen a third party hierarchy plugin.

User_PUZJ8

John,

Thanks for sharing your experience.

Regards

Dhawal