This is a migrated thread and some comments may be shown as answers.

DropDownTree Clear Button

7 Answers 940 Views
DropDownTree
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Veteran
Mark asked on 17 May 2018, 02:45 PM

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.

7 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 21 May 2018, 07:25 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ehren
Top achievements
Rank 1
answered on 20 Jul 2018, 01:03 AM

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.

 

 

0
Plamen
Telerik team
answered on 23 Jul 2018, 09:26 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Subramanya Kumar
Top achievements
Rank 1
answered on 25 Jul 2018, 10:14 AM

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?

0
Mark
Top achievements
Rank 1
Veteran
answered on 25 Jul 2018, 03:47 PM

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

...
treeview: {
    change: function(e){
        if (!e.sender.dataItem(e.node).level()) {
             e.preventDefault();
        }
    }
}
...
0
Plamen
Telerik team
answered on 27 Jul 2018, 11:19 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
Iron
answered on 10 Apr 2024, 08:50 PM

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

Tags
DropDownTree
Asked by
Mark
Top achievements
Rank 1
Veteran
Answers by
Plamen
Telerik team
Ehren
Top achievements
Rank 1
Subramanya Kumar
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Veteran
John
Top achievements
Rank 1
Iron
Share this question
or