Removing a node from PrimeNg tree component when filtering and dropping

Hey there, I'm experiencing an issue with dragging and dropping from a tree while filtering. It seems that when I drag and drop without using the filter, the item is removed from the right tree. However, when I apply the filter, the item doesn't get removed.

Check out this video illustrating the problem

<p-tree [value]="data" [draggableNodes]="true" [droppableNodes]="true" [filter]="true" filterBy="label">
  <ng-template let-node pTemplate="default">
    <div>{{node['label']}}</div>
  </ng-template>
</p-tree>
<p-tree [value]="_target" [draggableNodes]="true" [droppableNodes]="true" [filter]="true" filterBy="label">
  <ng-template let-node pTemplate="default">
    <div>{{node['label']}}</div>
  </ng-template>
</p-tree>

Answer №1

It is essential to assign a unique key to each item in the TreeNode array ('data' in this scenario). Without a key, the Tree component will not be able to trigger events on filtered tree nodes. One simple solution could be to populate the node.key field with the nodes' names.

The official documentation available at https://www.primefaces.org/primeng/#/tree seems to overlook this crucial detail - instead, they redirect users to their GitHub page (https://github.com/primefaces/primeng/issues/7237#issue-409791407) without providing a clear explanation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with 'else if' statement in React Typescript: Unneeded 'else' block following 'return' statement

I am encountering an issue with the else if statement below. Even after removing the last pure Else statement, I am still getting an error on ElseIf from Lint. How can I fix this problem? Error message: Unnecessary 'else' after 'return&apo ...

The typescript compiler encounters an error when processing code that includes a generator function

Recently, I started learning about TypeScript and came across the concept of generators. In order to experiment with them, I decided to test out the following code snippet: function* infiniteSequence() { var i = 0; while(true) { yield i++ ...

Steps to authorize an API request using a token

I have an API that requires authentication using a token. In Swagger UI, I am able to authenticate this API by providing the token in the authorize section. For example, if I input "Token 6ec8f4023d8148209749a1ed972xxxx" in the authorization box Here is ...

Declaring a function type with a void parameter type in typescript

Embarking on my journey with ts and currently exploring TypeGraphQL. I came across something that caught my attention and seems unfamiliar to me: export declare type ReturnTypeFunc = (returns?: void) => ReturnTypeFuncValue; How should this type be unde ...

Is there a syntax available for type annotation of arrays created from pre-declared variables?

According to my standards, all possible annotations are required in TypeScript. Therefore, TypeScript-ESLint is prompting me to annotate the `[ responseData, cognitoUser ]`. However, when I try to use the syntax `[ responseData1: ResponseData1, responseD ...

combineLatest will trigger only for the initial event

I am looking to combine 3 events and trigger a service call when any of them are fired. Currently, I am using the combineLatest method, but it seems to only work when the first event is triggered by filterChanged. The issue here is that filterChanged is a ...

Encountering a Zone.js error when trying to load an Angular 7 app using ng serve, preventing the application from loading

Scenario: Yesterday, I decided to upgrade my Angular app from version 5.2.9 to 6 and thought it would be a good idea to go all the way to 7 while I was at it. It ended up taking the whole day and required numerous changes to multiple files, mostly due to R ...

Having trouble extracting a list of matches using a Regular Expression?

const stringWithDate: string = "4/7/20 This is a date!"; const reg: RegExp = new RegExp("^(\d{1,2}\/\d{1,2}\/\d{1,2})").compile(); const exist: boolean = reg.test(stringWithDate) const matches: RegExpExecArray | null = reg.exec(str ...

Implement a nested feature within the Accordion component

I am currently working on a project using Next.js and TypeScript. Within this project, I have implemented an accordion component as shown below: import React, { useEffect, useState } from 'react'; import classes from './Accordion.module.scss ...

Angular2 tubes sieve through hyperlinks within HTML content

As I receive HTML strings from an external source, my goal is to filter out all links that contain images, remove the href attribute, and replace it with a click event. I have attempted to achieve this using an Angular pipe, but so far I have only been suc ...

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

Reasons Why Optional Chaining is Not Utilized in Transpiling a Node.js + TypeScript Application with Babel

Currently, I am delving into Babel in order to gain a deeper understanding of its functionality. To facilitate this process, I have developed a basic API using Node.js and TypeScript. Upon transpiling the code and initiating the server, everything operates ...

Definition of a class in Typescript when used as a property of an object

Currently working on a brief .d.ts for this library, but encountered an issue with the following: class Issuer { constructor(metadata) { // ... const self = this; Object.defineProperty(this, 'Client', { va ...

Typeorm issue: Foreign key insertion not functioning correctly with cascade enabled

I currently have a situation where I am dealing with 2 entities that have a ManyToOne/OneToMany Relation with cascade enabled. < One: Sender ---- Many: Transfer (cascade insert) > My goal is to add 2 new Transfer instances with the same sender. How ...

Transform Promise<any> into a designated type failure

Beginner inquiry concerning typescript/angular4+/ionic4. I have a service set up to make backend REST calls, and based on the response received, I need to store that data in local storage for future reference. However, I am encountering a type conversion e ...

Caution: Npm Angular alert during package installation

I keep encountering npm warnings while attempting to install packages: $ npm install npm WARN @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8d81839e87828b9cc38d8287aedfdec0dec0dc">[email protected]</a> ...

Ways to prevent an array from being reset

My issue involves the clothes and orders tables, along with an array based on Clothes and Orders models. Whenever I add a clothes element into the Orders array and specifically update the amount and price of the selected item, it also updates the Clothes a ...

How to retrieve a component's property within an Angular2 provider?

As a beginner in OOP, I am currently experimenting with Ionic 2, Angular 2, and TypeScript. In my home.html file, I have an input field connected to the username property in home.ts as shown below: export class HomePage { public username: string; public n ...

Is TypeScript inadvertently including unnecessary files in its compilation?

In my configuration file, tsconfig looks like this: { "compilerOptions": { "module": "esnext", "target": "es6", "declaration": true, "outDir": "./dist", }, "include": [ "src/**/*" ] } Let's consider a simple source file f ...

What is the best way to execute a function within testing procedures?

As a Java Developer looking to expand my skill set to include NodeJS, I find myself wondering about running functions with tests in NodeJS. In Java, it's simple to run a function and verify its functionality with tests like this: @Autowired So ...