Issue with filtering in PrimeNG p-tree

It's a manual process to open the tree and view the filtered results, as child nodes are not displayed automatically.

In the html file:

<p-tree [value]="filesTree2" filter="true" selectionMode="single" filterMode="strict"></p-tree>

In component.ts :

filesTree2: TreeNode[] =
[
    {
        "label": "Documents",
        "key": "Documents",
        "data": "Documents Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [{
                "label": "Work",
                "key": "Work",
                "data": "Work Folder",
                "expandedIcon": "fa fa-folder-open",
                "collapsedIcon": "fa fa-folder",
                "children": [{"label": "Expenses.doc", "key": "Expenses.doc", "icon": "fa fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "key": "Resume.doc", "icon": "fa fa-file-word-o", "data": "Resume Document"}]
            },
            {
                "label": "Home",
                "key": "Home",
                "data": "Home Folder",
                "expandedIcon": "fa fa-folder-open",
                "collapsedIcon": "fa fa-folder",
                "children": [{"label": "Invoices.txt", "key": "Invoices.txt", "icon": "fa fa-file-word-o", "data": "Invoices for this month"}]
            }]
    },
    {
        "label": "Pictures",
        "key": "Pictures",
        "data": "Pictures Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [
            {"label": "barcelona.jpg", "key": "barcelona.jpg", "icon": "fa fa-file-image-o", "data": "Barcelona Photo"},
            {"label": "logo.jpg", "key": "logo.jpg", "icon": "fa fa-file-image-o", "data": "PrimeFaces Logo"},
            {"label": "primeui.png", "key": "primeui.png", "icon": "fa fa-file-image-o", "data": "PrimeUI Logo"}]
    },
    {
        "label": "Movies",
        "key": "Movies",
        "data": "Movies Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [{
                "label": "Al Pacino",
                "key": "Al Pacino",
                "data": "Pacino Movies",
                "children": [{"label": "Scarface", "key": "Scarface", "icon": "fa fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "key": "Serpico", "icon": "fa fa-file-video-o", "data": "Serpico Movie"}]
            },
            {
                "label": "Robert De Niro",
                "key": "Robert De Niro",
                "data": "De Niro Movies",
                "children": [{"label": "Goodfellas", "key": "Goodfellas", "icon": "fa fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "key": "Untouchables", "icon": "fa fa-file-video-o", "data": "Untouchables Movie"}]
            }]
    }
];
  1. Searching for "Expenses" should result in the tree opening to reveal the search term, which is currently not functioning as expected.

  2. Current Result.
    https://i.sstatic.net/PfFf5.png

  3. Desired Result.
    https://i.sstatic.net/A9BDN.png

  4. Even when attempting with Lenient Filter Mode and Strict Filter Mode, no results were achieved.

Please provide assistance, thank you

angulartypescriptprimeng

Answer №1

It seems like the issue is related to the version of PrimeNG being used.

In version 7.1.3, there is a problem with expansion https://i.sstatic.net/ADZXL.png

However, in version 8.1.1 (which is the latest stable version), the expansion works fine https://i.sstatic.net/svuqx.png

To fix this issue, make sure to check your package.json file and update the primeng dependency to version 8.1.1.

"dependencies": {
  //...
  "primeng": "^8.1.1",
  "primeicons": "^2.0.0"
},

For more information, you can refer to:

https://www.primefaces.org/primeng-7.1.3/#/tree

https://www.primefaces.org/primeng/#/tree

Answer №2

My situation mirrored yours - I discovered that the JSON was missing a key. Once I added it, everything worked perfectly.

Answer №3

I have thoroughly investigated this issue but could not pinpoint any problems with the code.

  • My current Primeng version is 7.

I corrected a typo in your JSON from "lakeybel": "Scarface" to "key": "Scarface". Surprisingly, even with the typo it continues to work correctly.

Please retry with the accurate JSON data and utilize <p-tree> as instructed in the guide: 

<p-tree [value]="filesTree2" [filter]="true" [filterMode]="strict"></p-tree>
.

Don't forget to inspect for any console errors or warnings that may appear.

Answer №4

Make sure to include a unique identifier for each element within your tree implementation. To see an example utilizing primeng 11.3.0, visit the following stackblitz link: stackblitz

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

The Angular expression has been modified after being examined

I've encountered a common error in my Angular application, but I'm struggling to pinpoint why it's happening and how to resolve it. I've attempted various approaches such as using setTimeout, delay(0), and switching to different hooks, ...

javascriptangulartypescript

Tips for Implementing a Button Click Sound in Ionic 2

I've noticed that many native apps have a distinct click sound when buttons are pressed. Is there a way for me to add this same feature to all buttons in Ionic 2? ...

cordovaangulartypescriptnpmionic2

How to verify completion of a Post request in Angular. Troubleshooting the ineffective use of ToPromise() and subscribe() methods

I am encountering an issue where my POST request is successful, but I am unable to print anything after it is completed. In my TS file, this is the code snippet: this.appService.sendPath({ title: serviceToPath }).toPromise().then ( ()=> { conso ...

angularpostpromise

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks). I have successfully gained access to the chrome object by following guidance from ...

javascriptangulartypescriptgoogle-chrome-extension

Perform an action after the Ngx Bootstrap modal has been hidden

My modal features a login button: <button type="button" (click)="save()" class="btn btn-primary"> login </button> Upon clicking the button, my desired outcome is to: first hide the modal, and second navigate to another route. However, ...

angulartypescriptmodal-dialogngx-bootstrap

Upgrade Angular to the most recent version available

Our organization is looking to upgrade our existing Angular version from v5 to either the latest version 12 or 13. After conducting some research, I believe that transitioning directly from 5 to 12-13 may be too significant. What would be the most effect ...

angularnpm

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

javascriptangularjsjsonangularecmascript-6

Utilizing Angular's intelligent dichotomy of (container) and (presentational) components, integrating conditional logic, and effectively passing inputs throughout the

Imagine you have two simple components, A and B. Component C will only display either component A OR B, which is controlled by smart component D. D (smart) | C (simple) / \ A B (both simple) Both components A and B have 10 inputs each. Ther ...

angulararchitecture

Issue with retrieving the positions of two numbers in an array

I encountered a challenge: I have an array of integers nums and an integer target. My goal is to find the indices of two numbers in the array that add up to the specified target. Example 1: Input: nums = [2,7,11,15], target = 9 Output: [0,1] Output: Thi ...

javascripttypescriptecmascript-6

Is it feasible to use a component in a recursively manner?

Following a two-hour search for a solution, I decided to reach out to experts as I suspected the answer might be simpler than expected. The project in question is an Angular7 one. In my goals component, I aim to include a "goal" with a button labeled "+". ...

htmlangulartypescriptcomponents

Retrieve a specific property within a nested JSON object using a single string for reference

When I execute the line let X = this.appGlobal.GetNavigationLanguage().data;, it returns JSON data as shown below. https://i.sstatic.net/wdT4e.png I am trying to extract the string NAV.REPORTS.BMAIL.TITLE. The translation code (NAV.REPORTS.BMAIL.TITLE ...

jsontypescript

Guide on accessing a File with Blob in Angular

Can you help me figure out why I am unable to send the input from my form and download a file at the same time? this.fg = this.fb.group({ rptReqCode:[''], rptCode:[''], parFldVal:[''], genType ...

angulartypescriptfilerxjsblob

Avoiding misreading email content with mail-listener2 - Tips for ensuring your function reads the correct emails

My E2E test utilizes the mail-listener2 to fetch emails. Though it generally works well, there is one recurring issue that I am struggling to resolve. Despite my extensive search for solutions online, the fix still eludes me. The problem arises when I use ...

node.jsangularprotractorimap

Creating a JSON object from two arrays is a simple process

Consider the following two arrays: let values = ["52", "71", "3", "45", "20", "12", "634", "21"]; let names = ["apple", "orange", "strawberry", &q ...

javascriptarraysjsontypescript

Creating an array of objects with string keys in JavaScript can be achieved by defining an array

In order to simulate a response from the server, I would like to use keys such as 1.0.0 instead of default indexes. This will result in something like the example below: https://i.sstatic.net/JUzjf.png I attempted using { 'versions': [ '1. ...

javascripttypescript

Experimenting with a VSCode extension that requires the act of launching a folder/workspace

Currently, I am developing a custom VSCode extension that considers the path of the file being opened within the workspace. To create a reproducible test scenario, I want to open the test folder itself in VSCode and then proceed to open the test file with ...

typescriptvisual-studio-codevscode-extensions

The file path and installed npm package intellisense does not appear in VS Code until I press Ctrl + space for TypeScript

Before pressing ctrl + space, intellisense shows: click here for image description After pressing ctrl + space, intellisense displays: click here for image description Upon updating to vs code version 1.11.0 and opening my project, I encountered an issu ...

typescriptvisual-studio-codeintellisensefilepathnode-modules

Encountering an error with loading %5Bobject%20Object%5D on a webpack-generated JavaScript file hosted in an express server because of Stylus styles

I have been experimenting with enhancing the example linked here. Initially, everything worked smoothly when I used npm start. However, I wanted to integrate it into an existing ExpressJS project. To achieve this quickly, I copied the three js files to the ...

expressangularwebpack

Concealing elements during page navigation in ANGULAR 2

One issue I'm facing is with the sidebar component in my main layout. It is showing up on all the pages in ANGULAR. I would like to hide it on a specific page when it routes there. Can anyone provide guidance on how to achieve this? ...

angular

Guide on transforming JSON data into a collection of custom objects using TypeScript

When working with raw data in TypeScript (originally a JSON file and imported using import * as raw_data from './json_file.json'): let raw_data: object = {"a": {"name": "Name a", "desc": "Description a ...

typescriptdictionary