We are trying to Update kendo from 2020.3.1021 to 2024.1.319, we download the version and then we just copy the kendo.all.min.js, but when we start running the application the drop downs are all oversize, the arrow grouping for the grids is black, but the main thing is we use the kendoMobileSwitch, but every where we try to use we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function".
The questions is, do we need to add any additional js reference file to use this function ?
this is how all the drop downs were affected.
this is the arrow grouping image that is back
and the js error is when we try to call like this: $("#element").kendoMobileSwitch({ checked: true });, we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function"
Hello,
I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working
see the code below
$('#pdfViewer').css('width', '100%');
var request = new XMLHttpRequest();
request.responseType = 'blob';
request.onload = function () {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: {
data: e.target.result.split(",")[1]
}
},
toolbar: {
items: [
"zoomInOut",
{
type: "button",
name: 'Description',
template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
}
]
},
width: "100%",
height: 760
}).getKendoPDFViewer();
};
};
on browser desktop modal it works normally
is there any way ,to get the Change event of kendo switch with jquery?i dont want to use kendo helper
<input type="checkbox" id="tst" aria-label="Notifications Switch" />
the following does not work:
$("#tst").change(function(){ alert("works");});
i
Hello,
I am trying to add a kendo switch to the kendo grid placed within kendo window.
My use case is following:
I create kendo window as directive in angularjs and then display it on button click.
I create column template for boolean value with kendo switch.
Grid is rendered at load time and no matter what I do, it displays ordinary checkbox or textbox if i remove type="checkbox".
I tried doing the same on following dojo and I get the same results with other data:
https://dojo.telerik.com/oKeXihIW
Just to mention that on the form that invokes directive I have switch and displays properly.
Thank you and regards,
Vedad
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>
I have a check box and kendo switch,i want the switch to be disabled by check the checkbox and enabled by un-check the checkbox,i think 4 years back this was a question and as it was answered at the time,should be able to do so,any way here is the code:
<input type="checkbox" id="eq1" class="k-checkbox">
<label>Crew Present:</label><input type="checkbox" id="notifications-switch" aria-label="Notifications Switch" disabled="disabled" />
<label>Grid Loss:</label><input type="checkbox" id="notifications-Grid" aria-label="Notifications Switch" disabled="disabled" />
here is the JS:
$(function () {
$("#notifications-switch").kendoMobileSwitch();
//$("#notifications-Grid").kendoMobileSwitch();
});
$("#eq1").change(function () {
debugger;
$("#notifications-Grid").prop("disabled", !$(this).is(":checked"));
});
Hi,
I would like to be able to check/uncheck the switch with the keyboard
but nothing bind to the switch. i tried :
scope.toggleSwitch.bind(
"keyup"
, toggleKeyUp);
scope.toggleSwitch.bind(
"focus"
, toggleFocus);
scope.toggleSwitch.bind(
"click"
, toggleclick);
any idea wuld be appreciate thanks
<
input
data-role
=
"switch"
data-bind
=
"checked:checked"
/>