如何在下拉列表中實現Kendo樹狀圖

Question

如何在Web MVC中使用Kendo UI在下拉列表中加載樹狀視圖？

Answer 1

劍道UI網頁「開箱即用」不支持在下拉列表一個TreeView。但是，您可以使兩個控件一起工作，以在下拉列表中爲您提供樹視圖的外觀。我很快就把一些東西扔在一起來展示。

我可以如下定義的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

下載示例代碼