如何在下拉列表中实现Kendo树视图

Question

如何使用Kendo UI为Web MVC在下拉列表中加载树视图？

Answer 1

Kendo UI Web“开箱即用”不支持下拉列表中的树视图。但是，您可以让两个控件一起工作，以便在下拉列表中显示树视图的外观。我很快就把一些东西拼凑起来展示。

我可以按如下方式定义HTML：

<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>

然后是JavaScript：

$(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");
                });
            }
        }
    });
});

您可以从原始网页http://www.telerik.com/forums/treeview-in-dropdownlist

下载示例代码