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>
6 Answers, 1 is accepted
Change event of the Kendo UI Switch is triggered only by user interaction. Meaning that the value will be changed accordingly - the checked attribute is toggled and the respective aria attributes. The change event that we see in the console is actually triggered by the simple checkbox and it does not have checked in its event arguments. I have updated the dojo to see how the change event of the switch is triggered:
https://dojo.telerik.com/EfAQemOn/4
Let me know if I have misunderstood the scenario and if there is any other behavior.
Regards,
Joana
Progress Telerik
Rank 1
I may be simplifying this a bit too much but the switch is essentially a fancy looking checkbox toggling between two states "on" or "off".
So given that it is being treated as such should the control not act like a "checkbox" under the hood.
It just means in an MVVM world binding the value in this case "checked" to the control makes no impact as you only get the current state of the control via the change event which seems counter intuitive to all the other MVVM bindings as in you bind a thing, you update a thing, it stores the updated thing in the view model. Rather than having to attach an event to update the underlying value of the thing.
https://dojo.telerik.com/EfAQemOn/6
So if you look at the updated dojo it seems the following is happening:
1) the initial switch state is set to "On" state
2) change the switch state to "Off" underlying "checked" value still thinks it is True.
3) change the switch state to "On" state value now thinks it is False.
So it would appear that the value that sits underneath this is not updating correctly on the initial user interaction and from that point forward it is updating (all be it the inverse of the correct value)
Thank you so much for clarifying the issue.
We are aware of it and will be fixed in the Next Latest Internal Build and in R1 2019 SP. It's fixed together with the angular binding logged in the following github issue:
https://github.com/telerik/kendo-ui-core/issues/4779
You could track its progress there.
Regards,
Joana
Progress Telerik
Rank 1
Thanks for the update.
I just wanted to make sure I wasn't going mad when I saw this behaviour happening. For now I have moved back to a "stylised" checkbox with bootstrap to achieve the same effect as the switch control.
Rank 1
The model is updated in version 2019.1.220, but the the change event still occurs before model is changed.
Thus, it is a "before change event".
See: https://dojo.telerik.com/@Stefan.Eiselt/asihalAk/2
I think that should be fixed, because <input type="checkbox" data-bind="checked: ..., events: { change: ... }"/> behaves differently.
Indeed, the change event is executed before the actual change in the view model. However, this is expected behavior as the change event is preventable. In the event args you could find the checked state of the widget.
Regards,
Joana
Progress Telerik