How to prevent drop down tree selection

[Arnaud Vallette]

Hello,

 

I started to use the Dropdowntree and I'm facing an issue when I want to prevent selection of parent items (I want the user to select only leaf items).

 

In this example : https://stackblitz.com/edit/angular-wh96bb 

I tried to intercept selection in the valueChange event, but it cannot prevent the dropdown to close. Also I select a top level item, the value change event is triggered and I can set ngModel value to null => so the drop down tree does not display anything. But If you open it and select the same top level item, then the value change event is not triggered, and the drop down closes and displays this item label

 

Is there anyway to prevent the dropdown to allow selection on parent items, and to not close itself when user clicks on one of these items ?

 

thanks in advance,

Arnaud

 

[Georgi]

Hello Arnaud,

Thank you for providing these details.

To start off with what is probably the most important info for you, here is how you can get rid of the unwanted text value of the DropDownTree on parent node selection. The example also shows how to prevent the behavior of the (close) event:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/open-state/#toc-preventing-opening-and-closing

and how to use the toggle() method to close the popup when selecting a child item.

Please note that the suggested workaround makes use of the non-public text field of the DropDownTree class. Future versions may break this code without warning, so please use it at your own discretion.

We will consider adding a reset() method to to the DropDownTree component which will allow to clear the value manually. Once such method is available the actual value of the component will be able to be cleared.

Please let me know in case any further information or assistance is required for this case. Thank you.

Regards,

Georgi
Progress Telerik

[Georgi]

Hello Arnaud,

I was kindly asked by the Account Manager assigned to Smurfit Kappa to revisit this ticket.

Here is a new runnable demo - let me provide some details on it:

Since my last reply, we have implemented the reset method of the DropDownTree as mentioned before. That made thins a little easier when manually resetting the value when a parent is clicked (last time we had to reset it manually).

After checking whether a given node is a parent, we can easily reset the value, but the problem remains that the DropDownTree is closed and remains without a selected value. As far as I understand, we want to just prevent the popup close if a parent was clicked.

To achieve that, I created a performCloseCheck method which prevents the popup close if no value is present.

There was yet another issue. Although the popup didn't close and the value was unchanged when clicking a parent, the parent still received the "k-state-selected" class, as this is dependent on complex internal component mechanics which I was not able to override externally.

To fix that, I used the querySelector method of the browser to locate the node with the said class, and removed it manually.

By this point everything seems to be working as desired, except that the popup wouldn't close when you click outside of it, if no value is selected yet (which is a valid user action). To fix that, I used the blur event of the DropDownTree and manually called the component's toggle method.

All is good to go from my point of view, except for the case where:

1. No value is selected, AND
2. The user clicks on the DropDownTree "input/wrapper" (above the popup)

Unfortunately I was not able to find a way to eliminate this issue, but I hope it is not critical. The component does not expose a separate click handler for its "input/wrapper" part. I was able to get somewhere with this code:

@ViewChild(DropDownTreeComponent, { static: true })
  ddtree: DropDownTreeComponent;
ngAfterViewInit() {
    document.querySelector(".k-dropdown-wrap").addEventListener("click", () => {
      if (this.ddtree?.isOpen) {
        console.log(this.ddtree)
        this.ddtree.toggle();
      }
    });
  }

...but alas, I was not able to combat that last little detail.

I hope that I have understood the issue correctly and provided some useful guidance. Please do let me know if any of the above is useful to you.

Looking forward to hearing from you.

Regards,
Georgi
Progress Telerik

[Arnaud Vallette]

Hi,

 

thanks for the quick feedback. It looks like it solves a big part of the problem (do not allow selection of non leaf items), I'll discuss it with my team tomorrow.

We still have a pending 'issue' : It is still mandatory to click on the little arrow to expand/collapse the tree. We would like to ease it for items that can not be selected (non leaf) by making the arrow click zone as big as the arrow and the text, or the full row. May be something possible by CSS ?

kind regards

arnaud

 

[Georgi]

Hi,

I managed to achieve that by subscribing to the nodeClick emitter of the TreeView component, taking the index from the event it emits, and adding that to the expandedKeys input.

Please note that with this config, a new subscription will be create each time the DropDownTree is opened, but I am sure that can be cleaned up quite easily.

Stackblitz Demo

Hope that helps!

Best,
Georgi