Destroying multiselect widget

javascript, jquery, kendo-multiselect, kendo-ui

Solution

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

});

Problem

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 components 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 overcome 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.

Original source