This is a migrated thread and some comments may be shown as answers.

Switch change event not fireing

5 Answers 303 Views
Switch (Mobile)
This is a migrated thread and some comments may be shown as answers.
Alan Mosley
Top achievements
Rank 1
Alan Mosley asked on 04 May 2015, 11:58 AM

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

5 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 06 May 2015, 08:47 AM
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!
 
0
Alan Mosley
Top achievements
Rank 1
answered on 06 May 2015, 03:01 PM
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

0
Alexander Popov
Telerik team
answered on 08 May 2015, 09:35 AM
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!
 
0
Matthew
Top achievements
Rank 1
Veteran
answered on 07 Feb 2019, 05:54 PM

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

 

0
Dimitar
Telerik team
answered on 11 Feb 2019, 09:03 AM
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.
Tags
Switch (Mobile)
Asked by
Alan Mosley
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Alan Mosley
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Share this question
or