We are testing 2023.3.1114. I checked the release notes of 2024.1 and didn't see anything. We are using LitElement to make a custom control that creates the kendoSwitch as show below. Not sure what is triggering the 2nd event. Although, I think
initWidget() {
const selector = '#' + this.elemId;
const chkMsg = (typeof this.checkedMsg === 'string') ? this.checkedMsg : 'yes';
const unchkMsg = (typeof this.uncheckedMsg === 'string') ? this.uncheckedMsg : 'no';
const options = {
checked: this.isChecked,
enabled: this.isEnabled,
messages: {
checked: chkMsg,
unchecked: unchkMsg,
},
change: (e) => {
this.updateValue(e.checked);
}
};
$(selector).kendoSwitch(options);
}
updateValue(newValue) {
// fire a change event to the element
$(this).trigger(CHANGE, [newValue]);
this.textValue = String(newValue);
this.requestUpdate();
}
$('input[type="checkbox"]:not([data-role="switch"])').kendoSwitch()
dataSource: dataSource,
excelExport: exportExcel,
columnMenu: true,
editable: "inline",
cancel: function (e) {
var grid = this;
var rowUid = e.container.data("uid");
setTimeout(function () {
grid.element.find("tr[data-uid='" + rowUid + "'] .checkBoxEditor").kendoSwitch({
messages: {
checked: "@Mui.Yes",
unchecked: "@Mui.No"
}
});
});
},
dataBound: function () {
this.tbody.find(".checkBoxEditor").kendoSwitch({
messages: {
checked: "@Mui.Yes",
unchecked: "@Mui.No"
}
});
},
function checkBoxEditor(container, options) {
$('<input type="checkbox" name="' + options.field + '"/>')
.appendTo(container)
.kendoSwitch({
messages: {
checked: "@Mui.Yes",
unchecked: "@Mui.No"
}
});
}
Looking to upgrade from a random jquery plugin to a built-in if one exists. This is rendered as a hidden Radio Button with a bunch of Label elements.
Is there a Kendo UI component for this?
I'm using UI for ASP.NET Core release 2021.3.1207
I have a modal dialog, containing a Switch control plus a few other controls, that is displayed when a button is pressed.
When I simply show the modal, all is fine.
When I try to set the value of the Switch 'check' then show the modal, the switch is being re-initialized and there are TWO 'k-switch-container' tagsets. Closing the dialog and showing again adds a THIRD 'k-switch-container'. etc. etc.
These extra 'k-switch-container' effects are:
- cannot tab directly to the next field, as focus disappears until TAB is pressed again. Happens for every additional <span> so eventually you need to press multiple tabs just to visit the next field.
- also when you are 'focussed' on one of these phantom locations, you can still press SPACE which toggles the Switch.
Have I done something wrong or is this a bug?
Thanks,
My Dialog
<div class="modal-body">
<form id="frmEvent" novalidate="novalidate" class="form-validation">
<div class="form-group">
<label>@L("Title")</label>
<input id="txtTitle" type="text" class="form-control border-2" placeholder="@L("title")" />
</div>
<div class="mb-2">
<div class="form-group">
@(Html.Kendo().Switch()
.Events(ev => ev.Change("onChangeAllDay"))
.Name("swAllDay")
)
<label class="ml-2 mb-2">
@L("AllDayEvent")
</label>
</div>
</div>
....
</form>
</div>
My Button Event
** if I uncomment these two lines, I start getting additional nested k-switch-container span tags upon EVERY show of the modal
function newEvent() {
var today = new Date();
$("#txtTitle").val('');
$("#txtDescription").val('');
$("#StartDatePicker").val(today.toLocaleDateString(kendoCurrentCulture));
$("#StartTimePicker").val('');
//var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");
//allDaySwitch.check(false);
$("#eventModal").modal('show');
}
Here's the HTML after just loading the modal WITHOUT setting check.
<div class="form-group">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<input name="swAllDay" type="hidden" value="false">
<script>kendo.syncReady(function(){jQuery("#swAllDay").kendoSwitch({"change":onChangeAllDay});});</script>
<label class="ml-2 mb-2">
All Day Event
</label>
</div>
Here's the HTML after just loading the modal WITH setting check, several times.
<div class="form-group">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
<input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle">
</span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<span class="k-switch-container">
<span class="k-switch-label-on">On</span>
<span class="k-switch-label-off">Off</span>
<span class="k-switch-handle"></span>
</span>
</span>
<input name="swAllDay" type="hidden" value="false">
<script>kendo.syncReady(function () { jQuery("#swAllDay").kendoSwitch({ "change": onChangeAllDay }); });</script>
<label class="ml-2 mb-2">
All Day Event
</label>
</div>
Hi,
I'm trying to add kendo mvvm switch to kendo mvvm grid cell,
Please give me a good example to do this on both on mvvm.
The switch's toggle() method doesn't fire the MVVM change event, nor does it update the viewModel property.
Setting the viewModel property obviously updates the viewModel property, but it too doesn't fire the change event.
Only clicking on the switch seems to fire it.
Both of the methods do change the visual state appropriately, and also end up changing the aria-checked value. Here is a dojo.
Is there a way to programmatically change the switch that also fires the change event?
Hi,
Could you please confirm or not that the Switch widget is compatible with IE9/10.
Seems not sure for me.
Best regards,
Laurent.
Just wondering if this is something wrong that I am doing, intended mechanics or a bug.
See dojo: https://dojo.telerik.com/EfAQemOn
If you change the state of the "switch" it does not register that the underlying value has been changed and maintains the previous recorded value. If you interact with the view model via the checkbox it is recording the change state.
Is this something that is easy to fix without having to check the state value via the onchange event which currently seems to be the way you are testing for the change state value?
just incase I have copied the dojo code here for you as well.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/switch/mvvm">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section">
<input data-role="switch"
data-bind="enabled: isEnabled, visible: isVisible, checked: isChecked, events: { change: onChange }" />
</div>
<input type="checkbox" data-bind="checked: isChecked, events: { change: onChange }"/> Change switch state
<div class="box">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
<style>
.demo-section {
text-align: center;
}
</style>
<script>
var viewModel = kendo.observable({
isChecked: true,
isEnabled: true,
isVisible: true,
onChange: function (e) {
kendoConsole.log("event :: change (" + (e.checked ? "checked" : "unchecked") + ") \r\n calling Directly::" + viewModel.isChecked +"\r\nCalling Via Get Method:: " + viewModel.get('isChecked'));
}
});
kendo.bind($("#example"), viewModel);
</script>
</body>
</html>