Update Kendo NumericTextBox with MVVM on spin

Question

Take a look at the MVVM example here:

How can I get the MVVM value to update on the spin event (clicking the up or down arrows)

Here is what I tried:

In the spin event, I tried to do

$("#ntb").getKendoNumericTextBox().trigger("change");

That worked but had weird side effects.

If there are enough elements on the DOM, the spin event will keep firing.

Another way to reproduce this is to take the code from here (jsbin)

Insert it in a HTML file, load it in Chrome or FF and then insert a break point at this line:

$("#ntb").getKendoNumericTextBox().trigger("change");

Keep hitting continue and you will see the breakpoint get hit time after time.

In firefox, if my DOM is large enough, I get a repro without a breakpoint.

Answer 1

I checked your jsbin and I saw some errors in html and javascript. I think while you were testing different codes you forgot to correct it. Anyway I clean up and correct your codes and put them to this jsfiddle.

After putting breakpoint (debugger;) I saw you are right onSpin event triggers infinitely but this odd act happens if you put a breakpoint in the event. If you remove breakpoint and put a console.log("onSpinevent triggered."); you see everything is okay and the event just triggered just once.

I faced before with such issues in different scenarios for example using alert() instead of console.log() for debugging purpose.

---

Codes:

var viewModel = kendo.observable({
    selectedNumber: 0,
    isEnabled: true,
    isVisible: true,
    onSpin: function () {
        //debugger;
        console.log("`onSpin` event triggered.");
        $("#ntb").getKendoNumericTextBox().trigger("change");
    },
    onChange: function () {}
});
kendo.bind($("#example"), viewModel);

Answer 2

Kendo support says to run this in the spin event:

this.set('selectedNumber', e.sender.element.val());

And that makes the problem go away.

Answer 3

You can try the below code. It works for me.

ViewModel

viewModel.bind("change", function (e) {
        console.log("property Changed on spin ");
    });

Razor code

<input id="tbSlideDuration" data-role="numerictextbox"
                             data-format="#"
                             data-min="1"
                             data-max="100"
                             data-bind="value:slideDuration, events: {spin:change}" />

this will call the change event under the hood :)