Switch Not honouring value correctly in MVVM

7 posts, 0 answers
  1. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 18 Jan Link to this post

    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>

     

  2. Joana
    Admin
    Joana avatar
    205 posts

    Posted 22 Jan Link to this post

    Hello David,

    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
    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.
  3. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 22 Jan in reply to Joana Link to this post

    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)

     

     

  4. Joana
    Admin
    Joana avatar
    205 posts

    Posted 22 Jan Link to this post

    Hi David,

    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
    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.
  5. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 22 Jan in reply to Joana Link to this post

    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. 

  6. Stefan
    Stefan avatar
    2 posts
    Member since:
    Sep 2008

    Posted 04 May in reply to Joana Link to this post

    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.

  7. Joana
    Admin
    Joana avatar
    205 posts

    Posted 07 May Link to this post

    Hi Stefan,

    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
    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.
Back to Top