is there a way to mark items of a DropDownTree component as non-selectable without disableing it completely? If not, is this feature on your roadmap?
This could make a lot of sense on parent items in a tree.
Best regards,
Christian
Georgi
Telerik team
commented on 30 Mar 2023, 08:29 AM
Hi Christian,
Thank you very much for the details provided.
From what I understand from your question, you are looking for an approach that would allow you to make parent nodes in the DropDownTree/MultiSelectTree components non-selectable while preserving their expand functionality. Please, correct me if I misunderstood you.
One of the possible ways to disable the parent nodes in a DropDownTree without disabling their children is to utilize the built-in NodeTemplateDirective and set a custom class for each of the component's items. Then, the developer should handle the opened and nodeExpand events of the DropDownTree and set the CSS pointer-events property of the parent elements to none. The last step that needs to be performed is to set the pointer-events of the arrow buttons to auto so that the user can expand the node.
For your convenience, I am sending you below a StackBlitz demo that implements this approach:
Indeed, the desired functionality cannot be fully achieved with the built-in features of the DropDownTree component. However, we do have plans to introduce a built-in mechanism that will allow the developer more freedom in the selection functionality of the component. It is in our development plans, but we can't provide a specific ETA on the release.
I hope this answers your question. Let me know if you need additional assistance with this case.
Hi Christian,
Thank you very much for the details provided.
From what I understand from your question, you are looking for an approach that would allow you to make parent nodes in the DropDownTree/MultiSelectTree components non-selectable while preserving their expand functionality. Please, correct me if I misunderstood you.
One of the possible ways to disable the parent nodes in a DropDownTree without disabling their children is to utilize the built-in NodeTemplateDirective and set a custom class for each of the component's items. Then, the developer should handle the opened and nodeExpand events of the DropDownTree and set the CSS pointer-events property of the parent elements to none. The last step that needs to be performed is to set the pointer-events of the arrow buttons to auto so that the user can expand the node.
For your convenience, I am sending you below a StackBlitz demo that implements this approach:
https://stackblitz.com/edit/angular-p5vvt3-m9i4gw?file=src%2Fapp%2Fapp.component.ts
Indeed, the desired functionality cannot be fully achieved with the built-in features of the DropDownTree component. However, we do have plans to introduce a built-in mechanism that will allow the developer more freedom in the selection functionality of the component. It is in our development plans, but we can't provide a specific ETA on the release.
I hope this answers your question. Let me know if you need additional assistance with this case.
Regards,
Georgi
Progress Telerik