[FIXED] PrimeNG p-tree filter Issue

Issue

Not showing child nodes, we have to manually open tree to see the filtered result.

in 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. when i tried to search for “Expenses” in search filter tree should open and show the result which is not working .
  2. Present Result.
    Tried to search for Exp and tree is not opened

  3. Expected result.
    Expected result

  4. Even i tried with Lenient Filter Mode and Strict Filter Mode with that also no result.

please help me,thank you

Solution

I think it is a PrimeNG version issue.

In version 7.1.3 , it is not expanding
In version 7.1.3 , it is not expanding

In version 8.1.1 (Latest stable version), it is expanding
In version 8.1.1 (Latest stable version), it is expanding

Check your package.json file and update primeng dependency.

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

For more details:

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

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

Answered By – Binara Thambugala

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published