DropDownTree - Allow selection of child node, but not parent nodes

1 Answer 72 Views
DropDownList DropDownTree wrapper
John
Top achievements
Rank 1
John asked on 20 Jan 2024, 05:12 AM

Is it possible to prevent the user from clicking (selecting) a parent node, but still allow selection of any children. Or ideally change the behaviour of the parent node to expand / collapse the node. The current behaviour of the DropDownTree is that all children are selected, and I don't want this, only a single (child)node  should be selectable

So in the example below, the user can select on Apple, Orange etc, but not Fruit / Vegetable 

- Fruit
- Apple
- Orange
- Peach
- Vegetable
- Spinach
- Beans
etc

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 24 Jan 2024, 10:59 AM

Hi John,

The DropDownTree does not provide such option for disabling the selection of particular items, but you can add such logic within the onChange event and set the new value only if the level of the item is not a root node:

    onChange(event) {
      if (event.level.length > 1) {
        this.value = event.value;
      }
    },

As for preventing the closing of the popup if you click on a root node, you can use the following CSS:

<style>
.k-dropdowntree-popup
  .k-treeview-lines
  > .k-treeview-item
  > div
  > .k-treeview-leaf {
  pointer-events: none;
}
</style>

Here is an example demonstrating the solution:

As a side note, you can consider using DropDownList with grouping:

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

John
Top achievements
Rank 1
commented on 29 Jan 2024, 05:29 AM

Thank you Konstantin , that worked well
Tags
DropDownList DropDownTree wrapper
Asked by
John
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or