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.

score 3 · Accepted Answer · answered May 24 '14 at 09:36

3

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);

answered May 24 '14 at 09:36

Iman Mahmoudinasab

6,861
4
44
68

Thanks for the cleanup and confirming my repro, nice to know I'm not crazy. The problem is in Firefox, it repros without a breakpoint.. Chrome and IE are just fine. – Matt May 24 '14 at 21:11
@Matt I just test in IE10 and FF29 none of them repro the issue without breakpoint! Open ff console and go to the jsfiddle click on spins just triggers `onSpin` once for each click. – Iman Mahmoudinasab May 24 '14 at 21:38
Sorry, it repros in FF if the DOM is large, I should have specified – Matt May 24 '14 at 21:41
@Matt: What about replacing `$("#ntb").getKendoNumericTextBox().trigger("change");` with `viewModel.set("selectedNumber", e.sender._value);` ? give it a try. – Iman Mahmoudinasab May 24 '14 at 22:26
Still fires indefinitely when a breakpoint is set. I guess I'll wait for Telerik to get back to us and I'll post the solution here. – Matt May 25 '14 at 00:06
1

It is not a bug ! When there is a breakpoint, the focus will get to the debug window and that messes up the component behavior. It thinks you never stopped clicking so it increments indefinitely... until you click somewhere on the page. – Stephane Mathis Oct 28 '15 at 08:19

score 1 · Answer 2 · answered May 27 '14 at 18:40

1

Kendo support says to run this in the spin event:

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

And that makes the problem go away.

answered May 27 '14 at 18:40

Matt

25,943
66
198
303

score 0 · Answer 3 · answered Feb 12 '15 at 03:41

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 :)

Update Kendo NumericTextBox with MVVM on spin

3 Answers3