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

[John]

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

 

[Konstantin Dikov]

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:

• https://stackblitz.com/edit/skggxf?file=src%2Fmain.vue

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

• https://stackblitz.com/edit/25saze?file=src%2Fmain.vue

 

Regards,
Konstantin Dikov
Progress Telerik

[John]

Thank you Konstantin , that worked well