How to implement the Kendo treeview in a dropdownlist - kendo-ui

Question

How do I load a treeview in a dropdownlist using Kendo UI for Web MVC?

Answer 1

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");
});
}
}
});
});
You can download sample code from original web page http://www.telerik.com/forums/treeview-in-dropdownlist