TreeView with disabled checkbox

1 Answer 1321 Views
TreeView
Pradeep
Top achievements
Rank 1
Pradeep asked on 18 Jun 2021, 05:47 AM

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

Sort by
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.

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

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/.

Pradeep
Top achievements
Rank 1
commented on 18 Jun 2021, 04:10 PM

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:

1st: With the use of kendoTreeViewExpandable directive and without the kendoTreeViewCheckable directive. The checkboxes would have to be created with node templateshttps://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
Top achievements
Rank 1
commented on 28 Jun 2021, 07:08 AM

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
Top achievements
Rank 1
commented on 21 Jan 2022, 07:41 PM

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

Tags
TreeView
Asked by
Pradeep
Top achievements
Rank 1
Answers by
Silviya
Telerik team
Share this question
or