Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree dropNdrop incorrect data in onNodeDrop event object #9502

Open
Halynsky opened this issue Nov 7, 2020 · 22 comments
Open

Tree dropNdrop incorrect data in onNodeDrop event object #9502

Halynsky opened this issue Nov 7, 2020 · 22 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Status: Pending Review Issue or pull request is being reviewed by Core Team

Comments

@Halynsky
Copy link

Halynsky commented Nov 7, 2020

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Previous issue. I am reopening a new one because this one was closed.
#5002

Plunkr Case (Bug Reports)

https://primeng-treedragdrop-demo-ptht6y.stackblitz.io

Current behavior

Wrong "dropNode" in the event object of onNodeDrop function

*Also, weird thing that sometimes I get "dropIndex" object in the event and in other cases its name just "index"
Its seems like when you dropping on a folder you get "index" key and when you dropping between other files you get "dropIndex"

Expected behavior
Always get parent node of the target place in dropNode object
Documentation of the difference between index and dropIndex or fix its behavior

Minimal reproduction of the problem with instructions
Case A

  1. Move the file inside the folder into another place between files in the current folder
  2. Check dropNdrop in the drop event object

Case B

  1. Move the file inside another folder and drop it between files
  2. Check dropNdrop in the drop event object

Please tell us about your environment:

  • Angular version:
    "@angular/core": "10.2.1",

  • PrimeNG version:
    "primeng": "10.0.3"

Please don't close this issue this time without deep investigation. It really prevents implementing some dragging functionality in the scope of server data, because you cant correctly track the new position of the node.

@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Nov 25, 2020
@joelcoxokc
Copy link

@yigitfindikli Any update on this? This is a critical one for us, As we are unable to proceed into production with this bug.

Seems like if I drop a node on another node... The event.dropNode is the correct new parent... with dropIndex of 0

However, If I expand node A. Then drag a node that is currently not a child of A into a specific index of A
Then event.dropNode is a new sibling and not the parent. Nor is the dropIndex correct.
If I drop a node at index 0 then the drop index is 0. But is if drop a node at any other index. It is index 1.

PLEASE UPDATE!!!! THIS IS CRITICAL to the functionality of the tree.
In my personal opinion, this makes the tree component entirely unusable, as we cannot accurately update data.

@joelcoxokc
Copy link

Currently, the only workaround is to do a DIFF check against my raw data and the value of the tree.
This is a CRUSH on performance because I have to recursively iterate my entire data collection on every drop event.

@joelcoxokc
Copy link

joelcoxokc commented Dec 7, 2020

UPDATE:

In the process of navigating a workaround, I found that the only way to even get a diff check to work is if I do the following.

I have to set validateDrop to true For no reason
Then onNodeDrop I have to call event.accept() & tree.updateSerializedValue()

This will update each treeNode with the appropriate children. However, it does not update each child's parent property

So I have to iterate through every treeNode and set its parent property manually.

NOTE: This is a much easier workaround if you keep a flat array in your personal code to iterate through

Then I can do my diff check.

@hannesthor
Copy link

hannesthor commented Apr 1, 2021

I am upvoting this.

@VictoriaKalakustava
Copy link

VictoriaKalakustava commented Nov 23, 2021

Upvoting
I found a workaround for my case. I am need to restrict to create parent node. I added the following code and it works for me. But it would be nice if the bug will be fixed because seems it is not assumed to use originalEvent. But maybe it will help other dev

onDrop(event: any) {
  if (event.originalEvent.target.childNodes.length === 0) {
    event.accept();
  }
}

@aymennsalhi
Copy link

even it's a little late, but I just find a way to accept the dropevent or not:

first of all try to add an attribute "level" to your node data, so that your tree for example have 3 nodes level, all nodes of 1st level will have level: 1, second levels nodes will have level: 2 ....

try to do this :

onDrop(e) {
console.log(e);
}
in here you will find that e --> originalEvent -> path[0] will have a html element (span or li) anyway, just focus on the classList

if you drop your node obove an other node so you will see "ng-star-inserted" class, but if you drop it in the droppoint (under each node) you will have a classList of ("p-treenode-droppoint" "ng-star-inserted" "p-treenode-droppoint-active")

so here you can make control like that and I hope it will resolve your issues:

onDrop(e) {
if(e.dragNode.data.level === e.dropNode.data.level && (e.originalEvent.path[0].classList.value.toString()).includes('p-treenode-droppoint')) {
e.accept();
this.newUpdates = true;
} else {
console.log('no wayyy!');
}
}

@francoisduchemin
Copy link

I'm using the version 14.0.2 and the dropNode is incorrect unfortunately...
Does anyone have a workaround that does not involve a diff of the whole tree?

@joelcoxokc
Copy link

I'm using the version 14.0.2 and the dropNode is incorrect unfortunately...

Does anyone have a workaround that does not involve a diff of the whole tree?

Unfortunately no. Our team just finished migrating away from Prime NG over this issue. The fact that it has been such an obvious issue without any comments from the contributors. This single issue renders the entire component unusable when trying to save the sort order to a database.

Our team doesn't have the time to deal with unmanaged and over looked open source libraries. I suggest you do the same.

@francoisduchemin
Copy link

Thanks for your answer! May I ask which tree library you are using instead?

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

@Halynsky
Copy link
Author

It was already reopened once... So you guys again closing it without any fix or review?

@mertsincan mertsincan reopened this Nov 11, 2022
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 11, 2022
@joelcoxokc
Copy link

joelcoxokc commented Dec 9, 2022

Ok Bug should still be active

Here is a video demoing my issues https://www.loom.com/share/9d4d6a6bff9e4094ac1b9926f362e3f6

@joelcoxokc
Copy link

Ive updated the comment with a video above with a shorter video... And re-pasting it here https://www.loom.com/share/9d4d6a6bff9e4094ac1b9926f362e3f6

@joelcoxokc
Copy link

joelcoxokc commented Dec 16, 2022

Another update.

Here is a video to describe what I am experiencing.

Also here is my patched code.

Our team will decide in January whether of not to continue to use Primeng over the bug that has been here for 2 years.

https://www.loom.com/share/c3bbdad4528842c4bbe36b5fe9d0706f?from_recorder=1&focus_title=1

import { Tree } from 'primeng/tree';
@Component({})
export class ExampleComponent  {
    @ViewChild(Tree)
    public tree: Tree;

    public onNodeDrop(event: { dragNode: TeamNode; dropNode: TeamNode; accept: () => void }): void {
            event.accept();
            this.tree.updateSerializedValue();

            let parentId: string | null = null;

            if (event.dropNode.children?.includes(event.dragNode)) {
                parentId = event.dropNode.data.id;
            } else if (event.dragNode.parent && event.dragNode.parent.children?.includes(event.dragNode)) {
                parentId = event.dragNode.parent.data.id;
            }

            // Do something with parent
    }
}

@xtt13
Copy link

xtt13 commented Mar 1, 2023

Are there any news regarding the issue? It's open way too long. @mertsincan

@shailee-m-argus
Copy link

@mertsincan any updates on this? it is a blocker for us

@joelcoxokc
Copy link

@xtt13 @shailee-m-argus

My patch code on my comment above is working for us in production.

I personally recommend finding a different UI library. This has been open for 3 years with no comments from prime.

@michelebenolli
Copy link

Any news on this?

@joelcoxokc
Copy link

Any news on this?

Prime team doesn't respond to issues anymore.

Your best bet is to watch the second video I posted and check out the code I posted. We have that code running in production.

Also get off prime asap.

@xtt13
Copy link

xtt13 commented Sep 7, 2023

Joel's fix helped me out on this issue. Its a workaround but ok for the moment.

I am also pretty frustrated why prime team didn't respond anymore..

@nssoft-rlagrange
Copy link

I'm using the version 14.0.2 and the dropNode is incorrect unfortunately...
Does anyone have a workaround that does not involve a diff of the whole tree?

Unfortunately no. Our team just finished migrating away from Prime NG over this issue. The fact that it has been such an obvious issue without any comments from the contributors. This single issue renders the entire component unusable when trying to save the sort order to a database.

Our team doesn't have the time to deal with unmanaged and over looked open source libraries. I suggest you do the same.

Hi @joelcoxokc , with what library did you swap primeng for the tree component ?
I have the same issue here and I'm considering switching too.

@meriturva
Copy link

We are in 2024 and we have the same issue.
Any news?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
None yet
Development

No branches or pull requests