TreeView Filter example with checkChildren, needs to only check the visible children

2 Answers 103 Views
TreeView
John
Top achievements
Rank 1
Iron
John asked on 10 Aug 2022, 03:46 AM

I've implemented the example code found here: https://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog

It works as expected and is perfect for my requirements, apart from one annoyance.

When the filter is in use some child nodes are hidden, but if you click the parent node checkbox, the result is that all child nodes are checked. Irrespective of what is visible (filtered).

This isn't very useful. Is there a solution whereby only the visible children would be checked/unchecked when the parent checkbox is clicked?

Thanks,
John

2 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 12 Aug 2022, 01:26 PM

Hello, John,

Currently there is no out-of-the-box solution to the scenario. The checkChildren option does not respect any filters applied to the TreeView dataSource. The widget itself does not support filtering. In the example it is accomplished hiding and showing the nodes. A possible scenario would be to replace the built-in checkboxes with custom ones through the template option. You can then implement further custom logic to check only the visible nodes.

Regards,
Martin
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


0
John
Top achievements
Rank 1
Iron
answered on 14 Aug 2022, 11:37 PM

Hi Martin,

Thanks for the reply. I implemented your suggestion, but the more I thought about it, the less sense it made from a users point of view. If the child nodes are filtered, having the parent node check or uncheck the filtered nodes becomes confusing. 

I coded as per my initial question using your example: A user filters on the category "Bed".  There are two child nodes showing, one in Furniture and one in Decor. If a user clicks "Furniture" the "Bed" checkbox is checked, but no other nodes under "Furniture" are selected. However "Furniture" is now checked. It shouldn't be, it is actually in tri-state.  This leads to more confusion if the user then filters for "Sofas".  As the "Furniture" node would need to change to be relevant to the filtered items only.

I have taken a more simplistic approach. I have kept your filtering example code and added buttons for "Select" and "Unselect". When clicked these simply select or unselect the visible nodes as per the filter. I  also set the treeview to checkChildren: false

It's not that elegant, but will suit my purposes. :)

Cheers,
John

Tags
TreeView
Asked by
John
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
John
Top achievements
Rank 1
Iron
Share this question
or