销毁多选小部件

Question

我想从Telerik的Kendo UI中销毁并重新创建多选小部件.通常情况下,我之前做了很多次很容易,但从来没有多选.我现在面临的问题是哪种方式应该起作用(至少我认为应该这样)......不是.

这是我用来销毁和重新创建网格或下拉列表等组件的代码:

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

我怎么说 - 如果我在下拉列表或网格上使用它 - 它的工作原理.但是在多选中它没有:

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

我准备了一个小的Dojo示例,其中显示了行为.当下拉列表被销毁并重新创建时,它看起来是正确的.当我对Multiselect做同样的事情时,它总是将widget添加为下一行.

当然我可以通过改变dataSource来解决这个问题,只是调用read方法或类似的东西,但我想知道它是否是bug或者还有另一种方法来销毁多重选择.

谢谢.

Answer 1

此代码使用unwrap()从kendo包装器div中删除原始输入,然后使用.remove()删除剩余的kendo DOM元素:

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

});