javascript - Destroying multiselect widget - Stack Overflow

admin管理员组

文章数量:1313107

I wanted to destroy and recreate multiselect widget from Telerik's Kendo UI. Normally it is easy thing which I done much times before, but never with multiselect. The problem I am facing now is that way which should work (atleast I think it should) ... does not.

Here is code which I am using to destroy and recreate ponents like grids or dropdowns:

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

How i said - If I use it on dropdown or grid - it works. But on the multiselect it does not:

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

I prepared small Dojo example where is shown the behaviour. When dropdown is destroyed and recreated it looks correct. When I do the same to Multiselect it always add widget as next line.

Of course I can overe this problem by changing dataSource and just call read method or something like that but I whould like to know if it is bug or there is another way how to destroy multiselects.

Thanks.

I wanted to destroy and recreate multiselect widget from Telerik's Kendo UI. Normally it is easy thing which I done much times before, but never with multiselect. The problem I am facing now is that way which should work (atleast I think it should) ... does not.

Here is code which I am using to destroy and recreate ponents like grids or dropdowns:

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

How i said - If I use it on dropdown or grid - it works. But on the multiselect it does not:

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

I prepared small Dojo example where is shown the behaviour. When dropdown is destroyed and recreated it looks correct. When I do the same to Multiselect it always add widget as next line.

Of course I can overe this problem by changing dataSource and just call read method or something like that but I whould like to know if it is bug or there is another way how to destroy multiselects.

Thanks.

• javascript
• jquery
• kendo-ui
• kendo-multiselect

Share Improve this question Follow asked Oct 19, 2016 at 12:19 AlagAlag 1,40811 gold badge1717 silver badges2727 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

This code uses unwrap() to remove the original input from the kendo wrapper div and then .remove() to get rid of leftover kendo DOM elements:

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

});

When you clear the html of multiselect1, it still leaves behind all the other dom elements created when the input is turned into a widget. Then when you recreate it, it doesn't quite handle it as well as the dropdownlist, which I think could be a bug.

If you instead wrap the controls you need to recreate in a div element and clear that element instead, it will get rid of all the extra elements so that you can start will a clean slate to create the new one.

http://dojo.telerik./@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"]
      }
});

I updated you code to this and it works:

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

Use remove will work once

本文标签： javascriptDestroying multiselect widgetStack Overflow