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