DropDownTree Clear Button

[Mark]

I have been playing around with the new DropDownnTree component (which I love btw) but found that there isn't a "clear" event so I have to use the "change" event which the clear button triggers. The problem is that the value is not reset before triggering this event therefore I can't use it to check if the change event was fired by the clear button.

Dojo: https://dojo.telerik.com/UNIdEjEH

<div id="example">
    <div class="demo-section k-content">
        <h4>Select an item</h4>
        <input id="dropdowntree" style="width: 100%;" />
    </div>
    <script>
        $(document).ready(function () {

            // create kendoDropDownTree from input HTML element
            $("#dropdowntree").kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource: [
                    {
                        text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ]
                    }
                ]
              , change: function(e) {
                kendo.alert("Value: " + this.text());
              }
            });
        });
    </script>
</div>

I would think either resetting the component before triggering the change button or adding a clear event is needed.

Thanks.

[Plamen]

Hi,

Thank you for your feedback and your concern with Kendo widgets.

Yes indeed a clear event will be quite useful so I have created an feature request issue and we will do our best add it as soon as possible.

If you observe other issues or have some improvement ideas don't hesitate to contact us again.

Regards,
Plamen
Progress Telerik

[Ehren]

Along the same lines, it would be very useful to have a property that allowed an item to be enabled but not selectable. Currently, it can only be enabled/disabled. This new option would be helpful in many situations. For example, if we had a parent object that represented people or users in the tree of the  and we want that to be expandable but not selectable. We would only want the child objects that represented specific people to be selectable. Unless I have missed something there is no way to achieve this and I have attempted to do this by intercepting the change event and checking if the selected item . If it didn't I then tried (unsuccessfully) to preventDefault and keep the event from bubbling up so it wouldn't set the value in the text field of the control. No matter what I do to stop the event it seems the control still sets the selected text value into its text field. I also haven't found a way to cast the selected to a  or similar like I can with the combo box so an example of how to do these things would be much appreciated. Thank you in advance and I too think this control will be useful.

 

 

[Plamen]

Hello,

Thank you for the feedback.

With the current version you can reach the select event of the treeview as it is done in this dojo, use the select event and prevent it for your custom conditions. We are planning to add this select event to the DropDownTree widget itself so that such scenarios are more easily achieved.
Hope this information will be helpful. If you have further questions or suggestions please let me know.


Regards,
Plamen
Progress Telerik

[Subramanya Kumar]

https://dojo.telerik.com/@zdravkov/OFaTaPEY

 

if we have checkboxes: true then Treeview select is not showing any effect in above dojo. any other way to achieve this?

[Mark]

You might try treeview.change event instead of treeview.select.

...
treeview: {
    change: function(e){
        if (!e.sender.dataItem(e.node).level()) {
             e.preventDefault();
        }
    }
}
...

[Plamen]

Hello,

It seems like preventing of the selection is not working correctly in scenarios with checkboxes and using 'change' was not working correctly at my side. I have logged the issue for fixing here and we will do our best to fix it as soon as possible.

Thank you for you concern with Kendo widgets.

Regards,
Plamen
Progress Telerik

[John]

I've found the solution to be quite simple after trying different options. When you need to clear the selected item in the drop down tree, regardless if using check boxes use:

let treeview = $("#myTree").data("kendoDropDownTree");
treeview.value([]);

I hope this helps someone looking for the "clear" button.

Cheers,

John