Kendo UI DropDownList with TreeView

Create a Kendo UI DropDownList that displays a TreeView in the dropdown.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<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>
    <li> item 3</li>
</ul>

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

JavaScript

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").kendoMenu({
    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");
            });
        }
    }
});