TreeView with disabled checkbox

[Pradeep]

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

[Silviya]

Hi Pradeep,

The TreeView component has a DisableDirective that I think could be useful in this case.

https://www.telerik.com/kendo-angular-ui/components/treeview/api/DisableDirective/

I have created a short demo of what could be done here: https://stackblitz.com/edit/angular-naltwp?file=app/app.component.ts

In it the code that is most important for the disabled checkbox implementation in the template is:

    <kendo-treeview
     ...
      kendoTreeViewDisable="text"
      [(disabledKeys)]="disabledKeys"
    >

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

[Pradeep]

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]

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:

1st: With the use of kendoTreeViewExpandable directive and without the kendoTreeViewCheckable directive. The checkboxes would have to be created with node templates: https://www.telerik.com/kendo-angular-ui/components/treeview/node-template/

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: 

https://github.com/telerik/kendo-angular/issues/2694 

Unfortunately, we don't have an exact timeline that I can share.

I hope this information proves helpful.

Best,

Silviya

[Pradeep]

Thank you Silviya for your update. We have made some workaround to resolve the issue. Would be a great help if its added in the component itself.

Thanks,
Pradeep K

[Andrew]

Hi Pardeep,

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.

Regards,

Harish Arora