검도 UI 트리보기 트리보기에 텍스트 상자 및 콤보 상자 추가

Question

우리 웹 응용 프로그램에 이미 구현 된 검도 트리보기가 있습니다. 새로운 요구 사항에서는 트리 뷰 내에 몇 가지 추가 컨트롤을 추가해야합니다.

• 시나리오 1 : 사용자가 트리 뷰에서 체크 박스를 선택하면 하나의 텍스트 상자가 (일부 비즈니스 로직을 기반으로) 선택 체크 박스 근처에 표시해야한다. 컨트롤에 필요한 데이터는 JS 객체에 있습니다.

• 시나리오 2 : 사용자가 트리보기에서 확인란을 선택하면 일부 비즈니스 논리에 따라 선택란 근처에 하나의 콤보 상자가 표시되어야합니다. 컨트롤에 필요한 데이터는 JS 객체에 있습니다. 이 컨트롤은 트리 뷰의 모든 수준에서 작성해야 내가 검도-UI의 붙박이 기능을 찾고

을 (코드에 이미있는 특정 비즈니스 로직을 기반으로) 나는 텍스트 상자 또는 콤보를 추가 할 수있는 -box는 트리 뷰 컨트롤 안에 있습니다. 검도 사이트에서는 많은 스레드를 사용할 수 있지만 비슷한 구현은 없습니다.

정확한 요구 사항을 이해하려면 아래 스크린 샷을 참조하십시오.

.

Answer 1

내장 된 기능이없는 것 같습니다. 그것은 사용자 정의 동작이므로 직접 작성해야합니다. 당신은 템플릿을 사용하여 그것을 달성 할 수 있습니다. 당신이 어떤 코드를 추가하지 않았기 때문에, 나는 데모 나 자신했다 :

위젯 구성 :

$("#treeview").kendoTreeView({ 
    dataSource: { 
     data: [{ 
     text: "Item 1", 
     value: 1, 
     showCombo: false, 
     checked: false, 
     items: [{ 
      text: "Item 1.1", 
      value: 2, 
      showCombo: true, 
      checked: false 
     },{ 
      text: "Item 1.2", 
      value: 3, 
      showCombo: true, 
      checked: true 
     }] 
     }] 
    }, 
    checkboxes: true, 
    template: kendo.template($("#item-template").html()) 
    }); 

    $("#treeview") 
    .on("change", "input.k-checkbox", function() { 
     var $select = $(this).closest("div").find("select"); 

     if ($select.length > 0) { 
     $select[($(this).is(":checked") ? "show" : "hide")](); 
     } 
    }); 

템플릿 :

<script id="item-template" type="text/x-kendo-template"> 
# if (data.item.showCombo) { # 
    #= data.item.text # 
    <select # if (!data.item.checked) { # #="style='display:none'"# # } #> 
    <option></option> 
    <option>Mechanical Engineering</option> 
    <option>Chemical Engineering</option> 
    <option>Electrical Engineering</option> 
    </select> 
# } else { # 
    #= data.item.text # 
# } # 
</script> 

나는 그것이 도움이되기를 바랍니다.

Demo

Answer 2

당신은 검도 옵션의 템플릿 구성을 사용할 수는 DontVoteMeDown 제안처럼 객체. 여기에 귀하의 요구 사항에 맞는 더 나은 솔루션입니다 :

{ 
    text: "Item 1.1", 
    value: 2, 
    checked: false, 
    extraOptions: ["", "Electrical Engineer", "Software Engineer"] // <-- Like this 
} 

그런 다음 템플릿에서이 같이 사용할 수 :

이

<script id="item-template" type="text/x-kendo-template"> 
    # if (data.item.extraOptions) { # 
     #= data.item.text # 
     <select> 
     # for (let index in data.item.extraOptions) { # 
      # if (index == +index) { # 
       <option>#= data.item.extraOptions[index] #</option> 
      # } # 
     # } # 
     </select> 
    # } else { # 
     #= data.item.text # 
    # } # 
</script> 

당신은 볼 수 이 그것을 필요로하는 트리 노드에 다른 데이터 항목을 추가 demo on Plunker.