드롭 다운 목록에서 검도 트리 뷰를 구현하는 방법

Question

웹 MVC 용 검도 UI를 사용하여 드롭 다운 목록에 트리 뷰를로드하려면 어떻게해야합니까? "상자 밖으로"

Answer 1

검도 UI 웹은 드롭 다운리스트에서 트 리뷰를 지원하지 않습니다. 그러나 두 개의 컨트롤을 함께 사용하여 드롭 다운 목록에 트리 뷰를 표시 할 수 있습니다. 나는 빨리 보여주기 위해 함께 던져 봤다.

다음과 같이 나는 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> 

그리고이 같은 자바 스크립트 : 당신은 원래의 웹 페이지 http://www.telerik.com/forums/treeview-in-dropdownlist

을에서 샘플 코드를 다운로드 할 수 있습니다

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

을