Kendo UI Tree View Добавить текстовое поле и поле со списком внутри древовидной формы

Question

У нас есть представление дерева кендо, уже реализованное в нашем веб-приложении. В нашем новом требовании мы должны добавить некоторые дополнительные элементы управления в виде дерева.

• Сценарий 1: После того, как пользователь выбирает флажок из поля зрения дерева один текстовое поле должно быть показано рядом с флажком (на основе некоторой бизнес-логике). Необходимые данные для управления будут присутствовать в объекте JS.

• Сценарий 2: После того, как пользователь установил флажок в виде древовидного изображения, рядом с выбранным флажком должно быть показано поле со списком (на основе некоторой бизнес-логики). Необходимые данные для управления будут присутствовать в объекте JS. Этих элементы управление должны быть созданы на любом уровне дерева (на основе определенной бизнес-логику, которая уже есть в коде)

Я ищу для встроенной функциональности в кендо-интерфейсе, где я могу добавить текстовое поле или поле со списком -box внутри элемента управления древовидной структурой. Я просматриваю много потоков, доступных на сайте kendo, но не получаю подобной реализации.

Пожалуйста, обратитесь к скриншоту ниже, чтобы узнать точное требование.

.

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.