[英]Destroying multiselect widget
I wanted to destroy and recreate multiselect widget from Telerik's Kendo UI . 我想从Telerik的Kendo UI破坏并重新创建多选小部件。 Normally it is easy thing which I done much times before, but never with multiselect. 通常,这是我之前做过很多次的容易的事情,但对于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. 我准备了一个小Dojo示例 ,其中显示了该行为。 When dropdown is destroyed and recreated it looks correct. 下拉菜单销毁并重新创建后,它看起来是正确的。 When I do the same to Multiselect it always add widget as next line. 当我对Multiselect执行相同操作时,总是将小部件添加为下一行。
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. 当然,我可以通过更改dataSource并仅调用read方法或类似方法来克服此问题,但是我想知道这是错误还是另一种方法来销毁多重选择。
Thanks. 谢谢。
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: 此代码使用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');
}
}); });
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. 当您清除multiselect1的html时,它仍将输入转换为小部件时创建的所有其他dom元素置于后面。 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. 如果改为将需要重新创建的控件包装在div元素中,然后清除该元素,它将消除所有多余的元素,因此您可以从头开始创建新的元素。
http://dojo.telerik.com/@Stephen/EDaYA 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"]
}
});
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');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.