Treeview filtering

[Rajesh]

Hi,

We are implementing filtering in Kendo Angular treeview.For that we are considering two options

Option 1:

Filtering based on below link

https://qqf7hb.run.stackblitz.io/

This example works fine. But it includes all child nodes/items of parent even child items does not contain filtered text. (only parent node contains filtered text and non of the child nodes/items. But still all the child nodes/items of parent are shown)

Do you have any sample to show filtering like below example

https://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog

Option 2:

Don't filter any nodes/items. While typing in filtering textbox, expand all parent and child nodes of treeview and display all nodes/items which has filtered text with different style (preferably with yellow background like attached image) and scroll the treeview to the first occurance of node/item which has filtered text (As there will be lot of items in the treeview with scroll bar) 

It would be great if you can provide any sample for this approach

Thanks,

Rajesh

[Dimiter Topalov]

Hi Rajesh,

I could not run the provided Stackblitz link on my end (please use the whole link from the browser address bar if you would like to share some Stackblitz demos), e.g.:



There are no built-in filter and search functionalities, but they can be achieved via a custom implementation based on processing the data with custom recursive logic like in the following online demo:

https://www.telerik.com/kendo-angular-ui/components/treeview/how-to/filtering/

As for the second option, a similar custom logic for finding the nodes can be applied, but additional rather complex custom logic for manipulating the content of each node should be applied. A possible approach is to use Node templates and render the "highlighted" portion of the text in a styled span (or other HTML element), and the other portion of the text - as a regular text (or in a non-highlighted element). This will require providing a "highlighted" and non-highlighted text for each node based on the filter term.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rajesh]

Hi,

Thanks for the suggestions.

Do you have any sample which demonstrates highlighting the treeview items that matches the filtering text (No need to highlight the whole TreeNode/TreeItem, but need to highlight only the text which is in the filtering textbox)

Thanks,

Rajesh

[Dimiter Topalov]

Hi Rajesh,

We do not have such an example, just the previously linked filtering one. The described highlighting would require a rather complex custom implementation that will basically duplicate the built-in browsers Ctrl+F functionality:



A sample approach will be to traverse all DOM elements representing the TreeView nodes and manipulate them in accordance with the search term. Here is a sample implementation that might point you in the right direction (I would like to point out that this is not thoroughly tested or officially supported):

https://stackblitz.com/edit/angular-onjvnd-uchpfc?file=app/app.component.ts

Alternatively, the data can be traversed recursively, and each item can hold an array of the "parts" that need to be rendered in the template - some highlighted some not.

Regards,
Dimiter Topalov
Progress Telerik