Serious Bug with Mobile Switch with custom labels

[Ron]

Hi,

We ran into a serious issue with the switch, when applying custom labels (a must for international support).

If the on/off labels are changed - after initialization ($("#my...").kendoMobileSwitch({...})

it all works well.

If we change the value in code (either by referencing the checked attribute of the tag or by doing $("#my....").data("kendoMobileSwitch").options.checked = .... the visual display gets crazy, it loses the custom values, and in iOS seems to also lose the blue color for on.

The solution we found was to initialize the tag each time we are trying to set it's value. It works well, but we get a DOM leak, we get junk tags created in the DOM from the previous executions.

Suggestions for a workaround or fixes would be greatly appreciated.

[Robert]

$("#mySwitch").remove();
$(".switch").append('<input id="mySwitch" />');
$("#mySwitch").kendoMobileSwitch({...});



<li class="switch"><input id="mySwitch" /></li>

Maybe something like this??  

[Alexander Valchev]

Hi Robert,

Dynamic change of HTML or options of the widget is not supported.

When the switch is build the framework generates additional mark-up which is why simply removing the input element will not work. Instead you should remove the closest .km-switch element to the #switch.

$("#switch").data("kendoMobileSwitch").destroy();
$("#switch").closest(".km-switch").remove();

Alternatively you may change the text of the .km-switch-label-on / .km-switch-label-off span elements.

$(".km-switch .km-switch-label-on").text("on");
$(".km-switch .km-switch-label-off").text("off");

Regards,
Alexander Valchev
the Telerik team