Serious Bug with Mobile Switch with custom labels

3 posts, 0 answers
  1. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 14 Nov 2012 Link to this post

    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.
  2. Robert
    Robert avatar
    198 posts
    Member since:
    Aug 2009

    Posted 31 Dec 2012 Link to this post

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

    <li class="switch"><input id="mySwitch" /></li>
    Maybe something like this??  
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top