Primeng: Filtering for Tree

[agusdutra]

It would be really nice to have a filtering box that can be added to Trees and filters the TreeNode[] on the component without losing the selection and the original TreeNode[].

The filter could work with the label of the Tree Nodes.

In a project I'm using checkable tree nodes and sometimes it gets a bit hard to find some nodes.

I'm talking about some filter like this:
http://ee.github.io/angular-ui-tree-filter/

Thanks.

[ajmair01]

Agreed :point_up:. We are using the tree component for selecting across a large hierarchy. Would be very nice to have filtering support without having to write custom code to support it.

Here is another example that is more similar to the current primeng component:
https://ant.design/components/tree/#components-tree-demo-search

[cagataycivici]

@mertsincan did it for PrimeFaces, we can do similar I believe.

[olegkon]

This Search/Filter is very important for us.
Can we vote on that issue? +1

When can we expect it done?

TIA,
Oleg.

[PrajwalGonsalves07]

+1

[beaugogh]

+1

[pepe-escrich]

+1

[mkseng]

+1

[saikiranmandhala]

+1

[valakhosravi]

+1

[banejo]

+1

[kkcode24]

+1

[mchauhan]

+1

[claudiuconstantin]

Any milestone for this?

[ethnoplex]

+1

[skormel]

+1

[sousajunior]

+1

[j1j]

+1

[mediaaminian]

+1

[cal2sms]

+1

[alaa9jo]

+1

[akashdeepg12]

It would be very good to have global functionality in PrimeNg tree.Atleast user can search any file/folder globally by using global filter box..

[fiszi]

+1

[claudiuconstantin]

Any updates on this one? From what I see in #4813 it seems that the new TreeTable component in primeNg 6.0 will have a filter functionality, so this one can be closed - right?

[cagataycivici]

Not in the scope of new TreeTable of 6.0.0-alpha.2 but we'll check filtering for 6.0-final.

[chennoam7]

Hi,
We need it too for the tree component, it will be a great feature.
Thanks,
Chen

[lucky1ravi]

Any update on this feature.

[i23591326]

I have implemented TreeTable filtering on my own by hiding rows in "body" template, since it's fully available for rewriting. However, in the case of Tree component, I cannot hide node using the same trick, since only a small part of tree node is customizable by templating.
Could anyone advise a workaround?

[kariponkko]

Any updates for this feature?

[RingoKam]

Not sure if this would help, following function would find the node you are searching for and expand it and its parent.

``javascript /** * @param {TreeNode} node primeng tree node data * @param {string} propField name of the property you are searching for ex: label * @param {any} searchValue value you are searching for */ filterExpandRecursive( node: TreeNode, propField: string, searchValue: any ): boolean { const isMatchSearchField = node[propField] === searchValue; node.expanded = node.children && node.children.length > 0 && node.children.some(childNode => this.filterExpandRecursive(childNode, propField, searchValue) ); return isMatchSearchField || node.expanded; }

[umangsavaliya]

Implemented Tree filter with help of below solution:
https://codereview.stackexchange.com/questions/148273/filtering-a-deep-array

[raycola]

Hi,
will TreeTable's Filtering be released with 7.0.0?
please It's very important

good job

[claudiuconstantin]

It seems that this will be included in 7.0.0-beta.2 (7.0.0-beta.1 was released today)

[cagataycivici]

We got something working but kinda ran out of time for 7.0.0-final so will be in 7.0.1.

[mertsincan]

Added the following attributes to tree;

Name | Type | Default | Description
-- | -- | -- | --
filter | boolean | false | When specified, displays an input field to filter the items.
filterBy | string | label | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
filterMode | string | lenient | Mode for filtering valid values are lenient and strict. Default is lenient.
filterPlaceholder | string | null | Placeholder text to show when filter input is empty.

filterMode has two values; lenient and strict
When using filtering on a tree,

• lenient->If the filtered value matches a node's text, this mode receives the node with the node's children and displays them in the tree. In short, this mode doesn't control node's children. The node is sufficient to match.
• strict-> this mode controls all nodes. It only shows all matches in the tree. If a node matches, but its children do not match, children are not displayed in the tree.

Exp;
Filtered Value; b

• lenient->
  Movies / Robert De Niro/ Goodfellas - Untouchables
• strict->
  Movies / Robert De Niro/ Untouchables

[eltigree]

In wich Release this filter for TreeTable will come?

[mertsincan]

Yes, I'm working on it.

[mertsincan]

Hi @eltigree,

Please see this issue; https://github.com/primefaces/primeng/issues/7230

[eltigree]

Thnx a lot @mertsincan! Great work!

[mertsincan]

You're welcome! Also, please see #7237 for Tree with filter and checkbox selection.

[akinihsan]

Teşekkürler elinize sağlık.

[ludakhris]

This is AWESOME! I was using an older version and was literally just looking for this feature!

[jigneshkhatri]

Facing serious issue when selecting any node, after applying filter:

Any workaround?

Angular: 8.0.2
primeng: 8.0.1

[szh]

@jigneshkhatri Are you doing something in the event handler that's causing it to change the selection, thereby calling the event handler again? It looks like something's causing an infinite loop

[jigneshkhatri]

@szh : Nope. Just have plain <p-tree> like this:

<p-tree [filter]="true" filterMode="strict" [value]="features" selectionMode="checkbox" [propagateSelectionUp]="true" [propagateSelectionDown]="true"></p-tree>

Without filter, it is working fine.

[jigneshkhatri]

Have anyone found any solution for this issue?

[AJBauwens]

Problem for me when using filter is that NodeSelect always selects top item in the tree irrespective of clicked node or whether or not the top node complies with the filter.

The filter is thus unusable

[mGershtein]

Check this out: https://github.com/primefaces/primeng/issues/7397

The selection after filtering will work if the nodes are provided with a unique key

[AJBauwens]

Thanks for this. Adding the key does enable me to identify the selected
node through the event but sadly seems to force the filter into strict mode
so that I am unable to see any child nodes.

On Tue, 15 Oct 2019 at 09:26, Michael Gershtein [e-mail]
wrote:

Check this out: #7397 https://github.com/primefaces/primeng/issues/7397

The selection after filtering will work if the nodes are provided with a
unique key

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/1683?email_source=notifications&email_token=ADLM4OE6DD7AXLDBOK5AWZLQOV5CJA5CNFSM4C2XGOBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBH4NZI#issuecomment-542099173,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADLM4OEJ5UXUZGAQ3MIOC4DQOV5CJANCNFSM4C2XGOBA
.

[ezespman]

Is there a way, the filter would only run when user press enter instead of pressing keys? that will be game change. otherwise, is there a way to run the filter from code?

[cyberrranger]

i m use a filter without click enter

<input (input)="filter($event)" pInputText placeholder="{{'Suche' | translate}}">

<p-treeTable ..... #tt> .......

filter(event: any) {
        let query = event.target.value;
        if (query.length >= 3) {
            this.hasFilter = false;
            this.query = query;
            this.tt.filter(query, "global", "contains");
        } else {
            this.tt.filter(null, "global", "contains");
            if (!query) {
                this.query = null;
            }
        }
    }

[ezespman]

Thanks Cyber Ranger, But p-tree is another story. It could be an option to let user press enter to traverse through the tree especially for large data. Or click the search button after they type.

Cheers,
Ezechias Dominique

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: [e-mail]
Sent: Monday, April 6, 2020 5:04 AM
To: primefaces/[e-mail]
Cc: [e-mail]; [e-mail]
Subject: Re: [primefaces/primeng] Filtering for Tree (#1683)

i m use a filter without click enter

.......

filter(event: any) {

           let query = event.target.value;

           if (query.length >= 3) {

                   this.hasFilter = false;

                   this.query = query;

                   this.tt.filter(query, "global", "contains");

           } else {

                   this.tt.filter(null, "global", "contains");

                   if (!query) {

                           this.query = null;

                   }

           }

    }

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/primefaces/primeng/issues/1683#issuecomment-609668823, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANML4226PNAQRCO2LYMKKC3RLGLJ5ANCNFSM4C2XGOBA.

[ezespman]

Greetings cyberranger,

        As you know, we are in a situation that is dire because we have to make sure we stay healthy and also to take care our love ones. It is a challenge for us now, since we are not used to stay in a confined place for amount of time and if we have to take care our loved ones, such as our family members, and other people.

        But there is a light in this darkness, the light is found in the bible that helps a lot of people to cope with situations that they are currently dealing. It will be great help to you, as it can provide some practical wisdom that you can use to apply. One verse, I would like to share with you is ISAIAH 33:24:

And no resident*https://www.jw.org/en/library/bible/nwt/books/isaiah/33/#fn114213414 will say: “I am sick.”+https://www.jw.org/en/library/bible/nwt/books/isaiah/33/#v23033001-v23033024The people dwelling in the land will be pardoned for their error.+https://www.jw.org/en/library/bible/nwt/books/isaiah/33/#v23033001-v23033024

Yes one day, we won't have to deal with this type of situation but as of now, we have to endure this for a short while. The day of hpe will happen under Jehovah's Kingdom with Jesus Christ as King. In the meantime, do not be stressful because that will cause unnecessary risks to you health and loved ones(Proverbs 14:30).

In the meantime, the video link below will give more info about why the bible is a book to study.

Online Video Library | JW.ORG Videos English<https://www.jw.org/en/library/videos/#en/mediaitems/VODMinistryTools/pub-wsb_1_VIDEO>

Online Video Library | JW.ORG Videos English

Bible-based movies and videos for families, teenagers, and children. Documentaries about Jehovah’s Witnesses. Wa...

Thanks,
Ezechias Dominique

From: [e-mail]
Sent: Monday, April 6, 2020 5:04 AM
Subject: Re: [primefaces/primeng] Filtering for Tree (#1683)

i m use a filter without click enter

.......

filter(event: any) {

           let query = event.target.value;

           if (query.length >= 3) {

                   this.hasFilter = false;

                   this.query = query;

                   this.tt.filter(query, "global", "contains");

           } else {

                   this.tt.filter(null, "global", "contains");

                   if (!query) {

                           this.query = null;

                   }

           }

    }

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/primefaces/primeng/issues/1683#issuecomment-609668823, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANML4226PNAQRCO2LYMKKC3RLGLJ5ANCNFSM4C2XGOBA.