Checkboxes with MVVM, IE vs Chrome

[Joe]

I have a series of checkboxes on a page, and the checked attribute of each is bound to a different property of a kendo observable viewModel.  I also have the click event bound to a javascript function.  Part of that event calls a separate function which retrieves the value of the viewmodel property that the checkbox is bound to.

What happens in Chrome is after my page loads, if the user clicks one of the checkboxes, the property of the viewmodel doesn't seem to get updated.  Upon subsequent clicks it does, only that first one seems to fail.  It doesn't seem to do this in IE.

So what is the difference in how the viewModel gets automagically updated with the checked value in Chrome vs IE?  I've been able to code around it, in my event code, I check if it's Chrome, and if it is I programmatically set the viewModel property to the opposite value (boolean) before continuing, and if it's IE I do not.  But it seems kinda wonky to me.

What I think is happening is in Chrome it runs the event first before updating the value, whereas in IE it updates the value first, then runs the event.  At least that's what it seems like.

 

[Joe]

I just did a small test of this, and my hypothesis seems to be correct.  In Chrome, it runs the event before the viewModel property gets updated.  Whereas in IE, it updates the property first then runs the event.  I've included my sample test.  It's visually apparent even because in Chrome my alert pops up, showing the value of the viewModel property and on screen the check hasn't left the checkbox yet.  In IE, the check goes away immediately, and when my alert shows, it shows the updated viewModel property.

Maybe I shouldn't be using the click event?

It won't let me attach my solution to show the example (C# MVC App), but here is the code from the Index.chtml file:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="someDiv" style="padding-left: 25px;">
    <input type="checkbox" data-bind="checked: boxChecked, click: GetCheck"/> Checkbox
</div>

<script type="text/javascript">
    var viewModel = kendo.observable({
        boxChecked: true,

        GetCheck: function(e) {
            NestedFunc();
        }
    });

    function NestedFunc() {
        alert(viewModel.get("boxChecked"));
    }

    $(function() {
        window.kendo.bind($("#someDiv"), viewModel);
    });
</script>

 

[Dimitar]

Hello Joe,

Thank you for the detailed sample provided.

On the following Dojo example you can find a modified version of the test Dojo, where the binding now returns the same value in every browser. You will notice that in order to achieve this, I have used change binding instead of click.

The observed behavior is specific to how IE triggers the click event and is related to its timing and you are correct that in IE the event runs first and then the value gets updated.

With the above suggestion approach (suing change), when the checkbox is unchecked it will return false and respectively true when it is checked. In this way you will be able to skip the additional logic that is applied depending on which browser is currently running.

I hope this helps. In case you need further assistance, please let me know.

Regards,
Dimitar
Progress Telerik

[Joe]

Thank you.  I'm not entirely sure why the click event was initially used instead of the change event (it was code I inherited), but it seems to be doing what I expect now.