TreeView in DropDownList

4 posts, 1 answers
  1. Kiya
    Kiya avatar
    3 posts
    Member since:
    Aug 2012

    Posted 07 Aug 2012 Link to this post

    I want to put TreeView in DropDownList, but I've no idea how to realize it. Does Kendo support it?
  2. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 08 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Kiya
    Kiya avatar
    3 posts
    Member since:
    Aug 2012

    Posted 12 Aug 2012 Link to this post

    Hi, John
    I understand it. Thank you very much.
  5. Kim
    Kim avatar
    4 posts
    Member since:
    May 2013

    Posted 03 Dec 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready