Forum Stats

  • 3,827,534 Users
  • 2,260,790 Discussions
  • 7,897,295 Comments

Discussions

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

John like many others
John like many others Member Posts: 116 Blue Ribbon
edited Nov 9, 2020 3:04PM in APEX Discussions

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

Answers