angularprimengprimeng-tree

PrimeNG - Tree DragDrop, nodes are not draggable


I am following this example from the official PrimeNG website to implement a very basic DragDrop Tree (I only need the re-ordering functionality, all nodes are leaves without children). The tree (which is constructed dynamically) is constructed successfully, but the nodes shown are not draggable, so I cannot move them up or down. Photo below

The dragdrop tree created, but items are not draggable

Code Below:

.html file

 <p-tree [value]="getItemsInTreeForm()" [draggableNodes]="true" [droppableNodes]="true"
        draggableScope="self" droppableScope="self">

 </p-tree>

.ts file

public getItemsInTreeForm(): TreeNode[] {
 
  let items = [{
  label: "Item1",
  data: "Backup Folder",
  expandedIcon: "pi pi-folder-open",
  collapsedIcon: "pi pi-folder"
},
  {
    label: "Item2",
    data: "Backup Folder2",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  },
  {
    label: "Item3",
    data: "Backup Folder3",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  }
]
return items as TreeNode[];
}

NOTE: I have tried this workaround but in vain as nothing changed, the console of the browser does not indicate any error too.

PrimeNG version - 12.1.0, Angular version - 12.2.3, Node version - 14.17.0


Solution

  • Provide the TreeDragDropService

    You need to provide the TreeDragDropService

    For example:

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [TreeDragDropService], // Without it, it does not work (drag & drop)
    })
    

    Initialize a property that will be manipulated by the tree

    You need to have a proper variable to support your tree (not just your function return)

    Initialize a property of your component with the result of the getItemsInTreeForm() then pass it to the template.

    See in the documentation that they are not passing directly the result of getFiles() but taking an intermediate variable to support the tree: this.nodeService.getFiles().then(files => this.files1 = files);

    My StackBlitz

    Here the link to the working Drag & Drop Tree on PrimeNG 12 with your data and method getItemsInTreeForm()