Клонирование Кендо MULTISELECT с помощью JQuery

Question

<div class="target-elements"> 

@(Html.Kendo().MultiSelect() 
     .Name("required") 
     .Placeholder("Select attendees...") 
     .BindTo(new List<string>() { 
      "Steven White", 
      "Nancy King", 
      "Anne King", 
      "Nancy Davolio", 
      "Robert Davolio", 
      "Michael Leverling", 
      "Andrew Callahan", 
      "Michael Suyama", 
      "Anne King", 
      "Laura Peacock", 
      "Robert Fuller", 
      "Janet White", 
      "Nancy Leverling", 
      "Robert Buchanan", 
      "Andrew Fuller", 
      "Anne Davolio", 
      "Andrew Suyama", 
      "Nige Buchanan", 
      "Laura Fuller" 
     }) 
     .Value(new string[] { "Anne King", "Andrew Fuller" }) 
) 

Я использую <a href="#" class="add">Add</a> кнопку, чтобы добавить его динамически.

Это моя HTML-страница в MVC. Я хочу клонировать этот мультиселектор во время выполнения.

Я использую следующий JavaScript:

<script type="text/javascript"> 

function cloneTargetBox() { 
    debugger; 
    var targetBoxClone = $(".target-elements:first").clone(); 
    targetBoxClone.find("input").val(""); 
    targetBoxClone.insertAfter(".target-elements:last") 
} 

$(document).ready(function() { 
    $(".add").click(cloneTargetBox); 
}); 

Это работает, если я использую обычный выпадающий список. но в кендо новый добавленный мультиселектор не работает.

Просьба предложить.

Answer 1

Я потратил часы на эту проблему. Я не думаю, что это можно сделать. По крайней мере, не с .clone(). Существует множество проблем, возникающих с клоном, даже если вы меняете идентификаторы и имена. Вы получите двойные мультиселекты (на самом деле, вложенные), или вы нажмете один, а раскрывающийся список откроется. Вы можете попробовать сделать глубокую копию .clone (true), как предлагалось @StephenMueke, но опять же, это не работает. Я думаю, что проблема связана с элементами мультиселектора, которые существуют в DOM за пределами клонированной области.

У меня есть обходной путь, который я создал из бит и частей по всему Интернету, и это может быть полезно в крайнем случае, если вы поднимете руки на .clone и все еще нуждаетесь в этом мультиселекте. Этапы:

• Настройте скрытый, пустой выбор на странице, которая будет вашим предназначением клона.

  <select style="display:none" id="notYetMultiSelect> 
  

• Настройка источника MultiSelect с установкой источника данных, однако вы делаете это. Дайте ему id = «MS».

• в вашем методе cloneMultiSelect(), просто увеличьте этот скрытый выбор как MultiSelect и дайте ему источник данных вашего исходного исходного кода.

  // unhide the damn thing or you wont see it. 
  $("#notYetMultiSelect").show(); 
  var masterMultiSelect = $("#MS").data('kendoMultiSelect'); 
  var masterMultiSelectRecords = masterMultiSelect.dataSource.data().toJSON(); 
  // enhance as multiselect 
  $("#notYetMultiSelect").kendoMultiSelect({ 
  dataTextField: "something", 
  dataValueField: "somethingElse", 
  placeholder: "whatever", 
  dataSource: masterMultiSelectRecords, 
  }); 
  

Если вы хотите передать значения тоже идти вперед. просто используйте ссылку на главный.