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
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
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)
})
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);
Here the link to the working Drag & Drop Tree on PrimeNG 12 with your data and method getItemsInTreeForm()