How to implement drag & drop on filtered tree?

UI Components for Angular
Post Reply
Paar
Posts: 1
Joined: 07 Jul 2023, 08:45

07 Jul 2023, 09:14

I've decided to use PrimeNG components for our company's project, specifically the tree component. It worked nicely until I've started implementing drag & drop functionality. My main problem is when using the drag & drop on the tree when it's filtered, the changes are not being reflected in the original unfiltered tree model or behave weirdly. I suppose when filtering the tree another temporary model is created and when the filter is disabled, the original unfiltered model is displayed and the filtered one is tossed away. Changing order of a node is being ignored, when dropping one node onto another the original is copied, not moved.
I tried to implement my own logic which would allow me to drag & drop nodes even when the tree is filtered but I cannot do it as the onNodeDrop event doesn't tell me if the dragged node is being inserted before/on/after target node. Is there a way to get the information? I've checked the source code and this is all the information provided by the event:

Code: Select all

let dropParams = { ...this.createDropPointEventMetadata(<number>position) };
this.tree.onNodeDrop.emit({
    originalEvent: event,
    dragNode: dragNode,
    dropNode: this.node,
    index: this.index,
    accept: () => {
        this.processPointDrop(dropParams);
    }
});
Am I missing something?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 17 guests