Completed
Last Updated: 12 Mar 2018 21:08 by Nicolas
Johnny
Created on: 13 Mar 2013 15:18
Category: Kendo UI for jQuery
Type: Feature Request
418
TreeView in ComboBox
add treeSelect   example:http://www.miniui.com/demo/treeselect/lazy.html
43 comments
Nicolas
Posted on: 12 Mar 2018 21:08
I understand that it's a descent solution for most cases but not all of them, when you're already in a window for instance. A ComboBox is an appropriate control to use for that scenario. I agree you should reopen this suggestion, there's a lot of votes too.
Maciej
Posted on: 20 Sep 2016 16:11
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/16273882-a-treeview-in-combobox-once-again

M.
ADMIN
Petyo
Posted on: 20 Sep 2016 13:02
 We do understand that the provided solution is different than the one requested, and acknowledge that. 

We do, however, believe that the UI pattern we suggest works better for a number of scenarios, the most notable one being the mobile devices. The traditional dropdown drawer is relatively small for complex UI, and, by default, closes when clicked or scrolled. None of these disadvantages are present with the suggested dialog approach. 

If you are facing a specific scenario, which is not compatible	with the provided solution, I may suggest that you suggest a new idea in the portal - we will re-iterate over the case, and if a lot of people still consider it the dropdown implementation necessary, will include it in one of our next iterations. Thank you!
Per
Posted on: 20 Sep 2016 08:49
I agree. Please reopen this.
Maciej
Posted on: 20 Sep 2016 08:47
This solution is inappropriate - we expected something like this: http://www.brad-smith.info/blog/archives/193 (example from .NET Windows forms world)

Please reopen it.
abs cod
Posted on: 19 Sep 2016 14:08
This is not a TreeView in a ComboBox. Why is this marked as completed?
ADMIN
Petyo
Posted on: 19 Sep 2016 05:22
Implemented as an example in the new dialog widget - http://demos.telerik.com/kendo-ui/dialog/treeview-integration
Vinomanoharan
Posted on: 19 May 2016 01:51
We need a treeview inside a dropdownlist. Similart to dropdowntreeview control. If you have a workaround, please share. 
Jack
Posted on: 19 Mar 2016 15:40
I have improved on Darian's solution with MVVM data binding and templates with image support.

I could not involve the time to get optionLabel to work at this stage (http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-optionLabel). 

The code is too long to paste here and can be copied from https://raw.githubusercontent.com/kidoju/Kidoju-Widgets/master/src/js/kidoju.widgets.dropdowntree.js


Per
Posted on: 11 Feb 2016 19:12
On a mobile device, the hierarchy dropdown could work like this:
You click the dropdown and it animated expands downwards to x in height.
You gets presented with a list of only the root nodes, ei:
-------------------
Root 1
Root 2
Root 3
------------------
When you click on one of the nodes, like Root 2, it animates upwards and the list now looks like this:

------------------
Root 2
  Item 1
  Item 2
  Item 3
--------------
Clicking on Item 1, will give you a list like this
--------------
Root 2 -> Item 1
   Item X
   Item Y
--------------
You can back up the tree by clicking anywhere on the "breadcrumb" line.
The control could work like a regular treeview on a device connected to a keyboard or mice.

Morten
Posted on: 24 Jan 2016 14:29
Dropdown with groups only support 1 level of nesting. So for datasets that only have that it's a valid solution. For anything beyond that it doesn't work at all.

Also the groups them self are not selectable. Which causes issues with hierarchies that consist of the same type.

For example in a department hierarchy (tree) it makes a lot of sense to be albe to select a parent (group) object.
Per
Posted on: 24 Jan 2016 11:47
Dropdown with groups or cascading dropdowns only works if you need to select one item.
When you want the user to select multiple items (checkbox) and you have hierarchical data, treeview in dropdown is the best option. The users always understands what it can do when he/she sees one.
ADMIN
Telerik Admin
Posted on: 22 Jan 2016 14:42
Shouldn't cases like this one be tackled better by cascading dropdowns:
http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

or dropdown with groups:
http://demos.telerik.com/kendo-ui/dropdownlist/grouping 

These won't have UX problems on touch/mobile devices either.
Mark
Posted on: 22 Jan 2016 14:31
The need for a hierarchical drop-down appears in a variety of needs, such as Dept > Team > Person, or Country > State > Zip.  Simple drop-downs would not have collapse/expand capabilities that would be helpful for the user
Jack
Posted on: 11 Dec 2015 12:51
Also consider for MultiSelect widget (same thing)
ADMIN
Telerik Admin
Posted on: 26 Oct 2015 17:33
This item is still under consideration, folks. In the interim feel free to utilize/adapt the solution Darian posted further below in this thread, if applicable.
Kien
Posted on: 22 Oct 2015 14:48
This is critical missing! Please making it soon!.
Koen Verhagen
Posted on: 16 Sep 2015 15:54
very necessary, like in UI for ASP.NET AJAX.
Stanley
Posted on: 05 May 2015 19:54
I won't go as far as necessary -- but that will make the tree View much more useful. 
Ed
Posted on: 15 Jan 2015 01:26
@Atanas Korchev, please include the link to the original item (that is not the duplicate)
Imported User
Posted on: 17 Dec 2014 18:00
absolute necessary
Darian
Posted on: 03 Dec 2014 15:27
Hi all, here is the code that I write to modify the combobox to accomplish this, it's a requirejs module but you can adapt the code. Also the base class (combobox) can be replace for multiselect and dropdownlist (checked this widget). One issue I have is that when the combo popup opens with a selected value the treeview gets the selected value but doesn't expand the path.

define(['kendo/kendo.combobox.min', 'kendo/kendo.treeview.min'], function (kendo) {
    var DropDownTreeView = kendo.ui.ComboBox.extend({
        _treeview: null,
        init: function (element, options) {
            kendo.ui.ComboBox.fn.init.call(this, element, options);
            var self = this;
            self.popup.canClose = true;

            var id = $(this.element).attr('id') + '-treeview';
            self._treeview = $('<div id="' + id + '"></div>')
                .kendoTreeView({
                    dataSource: [],
                    dataTextField: self.options.dataTextField,
                    dataValueField: self.options.dataValueField,
                    loadOnDemand: false,
                    autoBind: false,
                    select: function (e) {
                        var item = self._treeview.getKendoTreeView().dataItem(e.node);
                        self.value(item[self.options.dataValueField]);
                        self.trigger('change');
                        self.popup.canClose = true;
                        self.popup.close();
                    },
                    collapse: function () {
                        self.popup.canClose = false;
                    },
                    expand: function () {
                        self.popup.canClose = false;
                    }
                });
            $('ul', self.list).replaceWith(self._treeview).remove();
            self.popup.bind('close', function (e) {
                if (!self.popup.canClose) {
                    e.preventDefault();
                    self.popup.canClose = true;
                }
            });
            self._closeHandler = function (e) {
                self.popup.canClose = true;
                kendo.ui.ComboBox.fn._closeHandler.call(this, e);
            };
            self.bind('open', function() {
                if (self.value()) {
                    var treeview = self._treeview.getKendoTreeView();
                    var selectedNode = treeview.findByText(self.text());
                    treeview.expandTo(selectedNode);
                    treeview.select(selectedNode);
                }
            });
        },
        options: {
            name: 'DropDownTreeView',
            parentField: null,
        },
        refresh: function () {
            kendo.ui.ComboBox.fn.refresh.call(this);
            if (this._treeview.getKendoTreeView().dataSource.data().length == 0) {
                this._treeview.getKendoTreeView().dataSource.data(processTable(this.dataSource._pristineData, this.options.dataValueField, this.options.parentField));
            }
        }
    });
    kendo.ui.plugin(DropDownTreeView);

    function processTable(data, idField, foreignKey) {
        var hash = {},
            root = null;
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var id = item[idField];
            var parentId = item[foreignKey];
            if (parentId == null) {
                root = id;
            }

            hash[id] = hash[id] || [];
            hash[parentId] = hash[parentId] || [];

            item.items = hash[id];
            hash[parentId].push(item);
        }
        return hash[root];
    }
});
Ed
Posted on: 30 Nov 2014 05:40
+1 is definitely necessary
Imported User
Posted on: 04 Nov 2014 06:52
The one from raddropdown from Asp.net controls Rocks... You should really use the Client side Code just in Kendo too !! We have a lot of hierarchical multiselects with search. Combobox Makes total Sense the Save Space... 
Imported User
Posted on: 22 Sep 2014 21:36
Push! This is an absolutely necessary widget.
Dennis
Posted on: 16 Sep 2014 12:24
Yes up
Jack
Posted on: 22 Aug 2014 16:56
Include multi-selection as in RadDropDownTree. 
Dinesh
Posted on: 02 Aug 2014 18:39
Here is the screenshot of the control

http://s30.postimg.org/at4cmj48h/Drop_Down.png
Emanuele
Posted on: 25 Jul 2014 06:25
absolute necessary
yi
Posted on: 23 Jul 2014 09:23
absolute necessary
Evgeniy
Posted on: 22 Jul 2014 10:56
I want to add DropDown control to TreeView node. But when I try to open a drop down list it closes, because there is a conflict between treeview and dropdown events.
Imported User
Posted on: 08 May 2014 14:40
very usefull request
Michael
Posted on: 08 May 2014 14:37
absolute 	necessary
Imported User
Posted on: 08 May 2014 14:35
We need this control now..
Otto Neff
Posted on: 08 May 2014 14:32
actually like you already have in the AJAX Controls:

http://demos.telerik.com/aspnet-ajax/dropdowntree/examples/functionality/checkallandclearbuttons/defaultcs.aspx

It has everything to filter and quick multiselect select parent/child relations. Nothing better!
Nguyen Ngoc
Posted on: 12 Mar 2014 05:32
Support implement the treeview in dropdownlist
Imported User
Posted on: 21 Aug 2013 03:49
this control should be used usually, I hope release it in next version asap.
Faiyaz
Posted on: 08 Aug 2013 05:36
Kendo team this is basic control. Please add this control in Kendo ui as well as all other Telerik asp.net ajax control.
Alexander
Posted on: 18 Jul 2013 13:26
This is the same issue, no?
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/4167344-dropdowntree-control
Prince
Posted on: 09 Jul 2013 11:23
Need this control asap :)
gm
Posted on: 08 Jul 2013 11:16
Implement a DropDownTree control like the one just added to Telerik ASP.NET AJAX :

http://www.telerik.com/products/aspnet-ajax/dropdowntree.aspx
Jason
Posted on: 06 Jun 2013 23:03
This is such a common control that pretty much every developer needs... yes we need it this.
IT
Posted on: 20 Mar 2013 17:11
A TreeView in ComboBox would be most helpful as both a stand-alone control and when editing within the Grid.  Please offer for MVC Wrappers as well.