Уничтожение мультиселектного виджета

Question

Я хотел уничтожить и воссоздать многоэлементный виджет из интерфейса Terik Kendo. Обычно это легкая вещь, которую я делал много раз раньше, но никогда с мультиселектом. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что этот способ должен работать (по крайней мере, я думаю, что должен) ... нет.

Вот код, который я использую для уничтожения и воссоздания таких компонентов, как сетки или выпадающие списки:

if ($('#dropdown1').data('kendoDropDownList')) {
    $('#dropdown1').data('kendoDropDownList').destroy();
    $('#dropdown1').html('');
}

Как я сказал - если я использую его в выпадающем списке или сетке - это работает. Но на мультиселекте это не так:

if ($('#multiselect1').data('kendoMultiSelect')) {
    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').html('');
}

Я подготовил небольшой пример Dojo, где показано поведение. Когда выпадающий список уничтожен и воссоздан, он выглядит правильно. Когда я делаю то же самое для Multiselect, он всегда добавляет виджет в качестве следующей строки.

Конечно, я могу преодолеть эту проблему, изменив dataSource и просто вызвав метод read или что-то в этом роде, но я хотел бы знать, является ли это ошибкой или есть другой способ уничтожения множественных выборок.

Благодарю.

Answer 1

Этот код использует unwrap(), чтобы удалить исходный ввод из div-оболочки kendo, а затем.remove(), чтобы избавиться от оставшихся элементов DOM kendo:

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
    alert('multiselect exists - destroying and recreating');

    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').unwrap('.k-multiselect').show().empty();
    $(".k-multiselect-wrap").remove();

    $("#multiselect1").kendoMultiSelect({
      dataSource: {
        data: ["Three3", "Four4"]
      }
    });

    $('#text2').text('Multiselect AFTER calling destroy');
  }

});

Answer 2

Когда вы очищаете html multiselect1, он по-прежнему оставляет все остальные элементы dom, созданные, когда входные данные превращаются в виджет. Затем, когда вы воссоздаете его, он не справляется с этим так же хорошо, как выпадающий список, который, я думаю, может быть ошибкой.

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

http://dojo.telerik.com/@Stephen/EDaYA

<div id='multiselectDiv'>
    <input id="multiselect1" />
</div>

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
      alert('multiselect exists - destroying and recreating');

      $('#multiselect1').data('kendoMultiSelect').destroy();
      $('#multiselectDiv').empty();

      $('#multiselectDiv').append('<input id="multiselect1" />')
      $("#multiselect1").kendoMultiSelect({
      dataSource: {
         data: ["Three3", "Four4"]
      }
});

Answer 3

Я обновил ваш код до этого, и он работает:

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
    alert('multiselect exists - destroying and recreating');
    var multiSelect = $('#multiselect1').data("kendoMultiSelect");
        multiSelect.value([]);
    $("#multiselect1").remove();
    $("#multiselect1").kendoMultiSelect({
      dataSource: {
        data: ["Three3", "Four4"]
      }
});

    $('#text2').text('Multiselect AFTER calling destroy');
  }
}); 

Используйте удалить будет работать один раз