Switch change event not fireing

5 posts, 0 answers
  1. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 04 May 2015 Link to this post

    I am working on an old site that uses the old MVC wrappers(before kendo), not sure if that has anything to do wit my problem.
    I have added several kendo switches to a page, I tried using the Kendo MVC wrappers but I just get a plain checkbox, so using the plan old kendo JavaScript widgets and they are showing up just fine. My problem is that the events don't fire.

    my code

    <div class="form-group">
               @Html.LabelFor(Function(model) model.OrderCompleted, htmlAttributes:=New With {.class = "control-label"})
               <div>
                   @Html.EditorFor(Function(model) model.OrderCompleted, New With {.htmlAttributes = New With {.class = "form-control kendo-switch", .data_change = "switchChange"}})
                   @Html.ValidationMessageFor(Function(model) model.OrderCompleted, "", New With {.class = "text-danger"})
               </div>
           </div>
    resulting html
    <div>
                    <span class="km-switch km-widget km-switch-off" style="-ms-touch-action: double-tap-zoom pinch-zoom;"><input name="OrderCompleted" class="form-control kendo-switch check-box km-widget" id="OrderCompleted" type="checkbox" value="true" data-role="switch" data-val-required="The OrderCompleted field is required." data-val="true" data-change="switchChange">        <span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: 0px;"></span></span>         <span class="km-switch-container"><span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">             <span class="km-switch-label-on">YES</span>             <span class="km-switch-label-off">NO</span>         </span>     </span></span><input name="OrderCompleted" type="hidden" value="false">
                    <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="OrderCompleted"></span>
                </div>
    <script>
        function setBoolean() {
            if ($(".kendo-switch").length) {
                $(".kendo-switch").kendoMobileSwitch({
                    onLabel: "YES",
                    offLabel: "NO"
                });
     
            }
        }
        function switchChange(e) {
            alert()
           // alert(e.checked)
            // alert(e.id)
        }
     
     
        
            setBoolean()
     
     
    </script>

    Thanks
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 May 2015 Link to this post

    Hi Alan,

    You can try using the Kendo UI MVC Helpers, for example: 
    @(Html.Kendo().MobileSwitch()
        .Name("switch")
        .Events(events => events.Change("switchChange"))
    )
     
    <script>
        function switchChange(e) {
            console.log("switch value was changed to " + (e.checked ? "checked" : "unchecked"));
        }
    </script>


    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 06 May 2015 in reply to Alexander Popov Link to this post

    Thanks, but the MVC widgets are not working at all, all I get is a normal html checkbox.
    the normal widgets work, but no event
    Thanks

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 08 May 2015 Link to this post

    Hi Alan,

    I am not sure what is causing this, but you can continue initializing the widgets without the wrappers and attach the event during the initialization. Here is an example.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 08 May 2015 in reply to Alexander Popov Link to this post

    Thanks that made the difference. I think the problem is to do with the old Telerik MVC wrappers not working with kendo.
Back to Top
Kendo UI is VS 2017 Ready