[CLOSED] Highlghting in tree filter

[lbrohan]

Hello

Just a queston about right direction to further investigation.

If I take your example : https://examples5.ext.net/#/TreePanel/Advanced/Filter/

would it be possible to have highlighted matching nodes in the tree

I.e if I type "data", it will filterout all nonmatching nodes and on those that match, it will yellowhighlight "data" string in node names? So for example for "Remote Data" node, "remote" would be normal, while the "Data" would be highlighted


Btw - if you can share few notes about how the tree filtering works internally it would be great. I tried to investigate myself in code, and I foundout that idea is relativelly clear - filtering is applied to node and then to all childnodes. What I do not understand is how it could work, as in filterBy function the the root node (as a parameter) comes sooner then any childnode (as parameter). So How it works that root node can decise about its visibility if there is no childnode yet.

Note as well that I had to set Animate property on tree to false otherwise I got javascript exception,( but I was not able to reproduce this problem on simplier example then our big app

Thanks
Louise

[fabricio.murta]

Hello, Louise!

would it be possible to have highlighted matching nodes in the tree

If you cannot already just use the Live Search Plugin as-is, it will be the definitive source of logic to apply to your custom filtering code; it should probably already work with TreeGrids; but if not, I don't think a lot of changes would be necessary to support it. Check out the example using it: Grid Panel > Plugins > Live Search.

Btw - if you can share few notes about how the tree filtering works internally it would be great(...)

I didn't delve into the code to raise notes on how the filtering works for tree panels/grids, but for what I can see in documentation, the Ext.data.TreeStore.filterBy() method is but an inherited method from ordinary stores. Specific node filtering logic can be attained with their respective methods:

- Ext.data.TreeStore.filterNew()
- Ext.data.TreeStore.filterNodes()
- Ext.data.TreeStore.filterRejects()

So the logic that you may have witnessed happens just by consequence; I'd guess if a root node doesn't match the Ext.data.TreeStore.filterBy() method, then its children will all be suppressed; and where elaborate and specific logic is needed, the specific filter methods should take place.

Note as well that I had to set Animate property on tree to false otherwise I got javascript exception,( but I was not able to reproduce this problem on simplier example then our big app

Animation is usually (and by "usually" I mean there may be exceptions to that rule) a delayed task because some actions must only take place once the animation hides content in the page, or else it would just look choppy. And when that's the case, you can explore animations' callbacks; so that you can play a "hide animation", then filter what it hid and then (it could be chained in the "hide" callback) show it back with another animation. What's the best approach is strictly dependent on the goal and scenario; but I feel you had issue with animations because some action that triggers layout update was called too early and "bulked out" the animation.

Hope this helps!

[lbrohan]

Ok thanks,

Live search plugin seems to be a solution for my problem, thanks for pointing to that ( and thanks for all parallel answers too).
Not sure how it works on first reading, but if I need your help I will create new thread for that

Feel free to close this one, you definitelly gave me direction for investigation

Louise

[fabricio.murta]

Hello again, lbrohan! Glad it helped, and thanks for the feedback!