Switch change event not fireing

7 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
    1444 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. 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

  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 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!
     
  5. 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.
  6. Matthew
    Matthew avatar
    14 posts
    Member since:
    Oct 2018

    Posted 07 Feb 2019 in reply to Alexander Popov Link to this post

    If this is not the proper thread for this question please forgive and I'll be happy to redirect to whatever url you provide.

    What namespace imports and/or javascript src files are required to get the switch to work on a "non mobile" browser.

    Thanks in advance

     

  7. Dimitar
    Admin
    Dimitar avatar
    806 posts

    Posted 11 Feb 2019 Link to this post

    Hello Matthew,

    With the 2019 R1 release a dedicated web Switch component has been added to Kendo UI. You can refer to the below resources to get started with using the widget:


    The Switch related module is part of the kendo.all.js, thus all you need to do to initialize the Switch is to load up the required Kendo UI Files:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Welcome to Kendo UI!</title>
        <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        
        <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        
        <!-- jQuery JavaScript -->
        <script src="js/jquery.min.js"></script>
     
        <!-- Kendo UI combined JavaScript -->
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        Hello World!
    </body>
    </html>


    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top