TreeView in DropDownList

[Kiya]

I want to put TreeView in DropDownList, but I've no idea how to realize it. Does Kendo support it?

[John DeVight]

Hi Kiya,

Kendo UI Web "out of the box" does not support a treeview in a dropdownlist.  However, you can get the two controls to work together to give you the appearance of a treeview in a dropdownlist.  I've quickly thrown something together to demonstrate.

I could define the HTML as follows:

<ul id="treeview">

    <li data-expanded="true">Item 1

        <ul>

            <li>Item 1.1</li>

            <li>Item 1.2</li>

        </ul>

    </li>

    <li data-expanded="true">Item 2

        <ul>

            <li>Item 2.1</li>

            <li>Item 2.2</li>

        </ul>

    </li>

</ul>

  

<input id="dropdown"></input>

 And then the JavaScript as this:

$(document).ready(function() {

    var dropdown = $("#dropdown").kendoDropDownList({

        dataSource: [{ text: "", value: "" }],

        dataTextField: "text",

        dataValueField: "value",

        open: function (e) {

            // If the treeview is not visible, then make it visible.

            if (!$treeviewRootElem.hasClass("k-custom-visible")) {

                $treeviewRootElem.slideToggle('fast', function() {

                    dropdown.close();

                    $treeviewRootElem.addClass("k-custom-visible");

                });

            }

        }

    }).data("kendoDropDownList");

    var $dropdownRootElem = $(dropdown.element).closest("span.k-dropdown");

      

    var treeview = $("#treeview").kendoTreeView({

        select: function (e) {

            // When a node is selected, display the text for the node in the dropdown and hide the treeview.

            $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());

            $treeviewRootElem.slideToggle('fast', function() {

                $treeviewRootElem.removeClass("k-custom-visible");

            });

        }

    }).data("kendoTreeView");

    var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

  

    // Hide the treeview.

    $treeviewRootElem

        .width($dropdownRootElem.width())

        .css({ "border":"1px solid grey", "display": "none", "position": "absolute" });

  

    // Position the treeview so that it is below the dropdown.

    $treeviewRootElem

        .css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

      

    $(document).click(function(e) {

        // Ignore clicks on the treetriew.

        if ($(e.target).closest("div.k-treeview").length == 0) {

            // If visible, then close the treeview.

            if ($treeviewRootElem.hasClass("k-custom-visible")) {

                $treeviewRootElem.slideToggle('fast', function() {

                    $treeviewRootElem.removeClass("k-custom-visible");

                });

            }

        }

    });

});

I've attached the sample code.  If you are interested in pursuing this, let me know, and I can take this concept and make it a more complete solution.

Regards,

John DeVight

[Kiya]

Hi, John
I understand it. Thank you very much.

[Kim]

I tried the solution with my treeview being binded
@(Html.Kendo().TreeView()
.Name("treeviewIterationPath")
.AutoBind(true)
.Events(events => events
.Select("onSelectTreeViewItemDoNothing")
)
.BindTo(ViewBag.TreeViewIterationModel)
//.HtmlAttributes(new {@class="demo-section" })
)

And it didn't work.  When i click on my tree view, i got a script error saying that "e" is unidentified.