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

Switch change event not fireing

5 Answers 1100 Views

Switch (Mobile)

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

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>

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

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>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

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