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

TreeView in DropDownList

3 Answers 795 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Kiya
Top achievements
Rank 1
Kiya asked on 07 Aug 2012, 05:50 AM
I want to put TreeView in DropDownList, but I've no idea how to realize it. Does Kendo support it?

3 Answers, 1 is accepted

Sort by
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 08 Aug 2012, 02:50 PM
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
0
Kiya
Top achievements
Rank 1
answered on 13 Aug 2012, 02:49 AM
Hi, John
I understand it. Thank you very much.
0
Kim
Top achievements
Rank 1
answered on 04 Dec 2013, 12:20 AM
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.
Tags
TreeView
Asked by
Kiya
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Kiya
Top achievements
Rank 1
Kim
Top achievements
Rank 1
Share this question
or