I need to create a treeview with disabled checkbox. Node expand and collapse function should work. There is no option for this kind of scenario, is there any work around.
I tried using template option but the checkedChange event is not getting triggered
1 Answer, 1 is accepted
0
Silviya
Telerik team
answered on 18 Jun 2021, 02:19 PM
Hi Pradeep,
The TreeView component has a DisableDirective that I think could be useful in this case.
The desired behaviour of treeview being expandable/collapsable and the checkedChange event being triggered is present.
Please take a look at the example and if it does not suit your needs let me know. I'll be glad to assist further.
Regards,
Silviya
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Silviya,
Thank you for your response. It works fine for the node without any children.
But the scenario am having is different for example adding 'Decor' and 'Furniture' to "disabledKeys" should disable the checkbox but it should be expandable. So that the child nodes can be viewed and also the disabled node should be clickable to display some details for the clicked node. But it's not working for this scenario.
Thanks & Regards,
Pradeep K
Silviya
Telerik team
commented on 21 Jun 2021, 01:20 PM
Thank you for the clarifications Pradeep. Indeed when a checkbox is disabled it cannot be expanded. In fact its children are also disabled and can't be checked too. There are two approaches around that:
If the checkboxes are created with node templates, the developer has the freedom to apply styles conditionally to each tree node. So it would be possible to disable the custom checkbox but leave the expand icon active. As a downside to this approach, the developer would have to write some custom logic for the corresponding checking/unchecking of the boxes.
2nd: With some DOM manipulation the checkbox could be hidden. Here is an example that hides the checkbox on every parent node: https://stackblitz.com/edit/angular-vwf9ad
As a matter of fact, we are planning an enhancement in the TreeView component for this kind of behaviour and there is an open issue in our github repo that you can track here:
Could you please share your solution to this problem. I am also having same issue. With disabled parent nodes can't expand for children. If i implement node template then check/uncheck functionality not working as expected. Like on child check parent should be in intermediate/checked state.