MVVM-KendoNumericTextBox restore previous value without triggering 'change' twice

Question

I'm using Kendo MVVM and I have a kendo numerictextbox bound to a kendo observable. All I want is: when the user changes value, a confirm should pop saying something like 'are you sure?' if yes -> no problem, go on. if no -> NOTHING should happen!

In theory it sounds simple as that... but I found 3 major issues:

1) numerictextbox only got 2 events: spin and change... so any idea of using keypress/focus/or any other event is discarded.

2) So tried using the change event... but I can't preventDefault! Another try was to save previous value and restore it back in case of 'no answer' but this brings me to trigger event change TWICE!

3) Any other model field who is 'observing' the numerictextbox will change before I even answer the confirm box... And I absolutely don't want this!

P.S. I also got a dropdownlist and a datepicker that must work in the same way!

Help please!

Provided a fast example: http://dojo.telerik.com/EyItE Here you can see how the numericbox2 (who is observing numericbox1 and is computed) changes itself before the user answer yes/no (problem 3) and keypress/focus/preventDefault doesn't work.

Provided a fast example: http://dojo.telerik.com/EyItE Here you can see how the numericbox2 (who is observing numericbox1 and is computed) changes itself before the user answer yes/no (problem 3) and keypress/focus/preventDefault doesn't work. — MaHaZaeL, Jul 23 '15 at 07:40

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

here is an answer about binding events not supported by default: Kendo MVVM and binding or extending custom events

For preventDefault (or "reverting" the value). I tried to store the previous value as you suggested and it is does not fire twice:

var viewModel = kendo.observable({
    myItem: { 
      // fields, etc
      myNumericBox: 10,
      myNumericBox2: function () {
        return viewModel.get("myItem.myNumericBox")*2;
      },
      tmp: 10
    },
    onChange: function (e) {
        if ( confirm("are you sure?")) {
                viewModel.set("myItem.tmp", viewModel.get("myItem.myNumericBox"));
          }
          else {
              viewModel.set("myItem.myNumericBox", viewModel.get("myItem.tmp"));

          }
    },
  tryf: function () {
    alert("hello!"); // doesn't trigger
  },
  tryk: function() {
    alert("hello2!"); // doesn't trigger
  }

});

edited May 23 '17 at 10:24

Community

1
1

answered Jul 24 '15 at 12:51

segy

162
2
11

Thanks for Answer. As you can see in the example you provided, the value of the model is changed: 1) when u type another number and lose focus. 2) When u press "NO" and revert it back. That's what I meant for "twice"!! – MaHaZaeL Jul 24 '15 at 14:43
Maybe it doesn't seems a big issue... but in my real situation that field is used to call a datasource bound to a listview! So it's really a bad deal calling the service and start a 'changing chain' of the model/ds/listview EVEN BEFORE the user can press answer the confirm! Plus when u press No, u must call another time the service, restore all calculated fields/ds/listview when u could (or at least it's what I'm trying to do) do nothing at all... – MaHaZaeL Jul 24 '15 at 14:45
Got it. I am sorry, but I can't help with that. Hope that you at leastsolved the binding issue. – segy Jul 29 '15 at 08:07

score 0 · Accepted Answer · answered Jul 29 '15 at 10:24

I solved with a custom binding that ask you a confirm between html widget change -> model update.

kendo.data.binders.widget.valueConfirm = kendo.data.Binder.extend({
            init: function (widget, bindings, options) { // start
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                this.widget = widget;
                this._change = $.proxy(this.change, this);
                this.widget.bind("change", this._change); // observe
            },
            refresh: function () { // when model change
                if (!this._initChange) {
                    var widget = this.widget;
                    var value = this.bindings.valueConfirm.get(); // value of the model
                    if (widget.ns == ".kendoDropDownList") { // for the dropdown i have to use select
                        widget.select(function (d) {
                            return d.id == value.id;
                        });
                    }
                    else widget.value(value); // update widget
                }
            },
            change: function () { // when html item change
                var widget = this.widget;
                if (widget.ns == ".kendoDropDownList") var value = widget.dataItem(); // for dropdown i need dataitem
                else var value = widget.value();

                var old = this.bindings.valueConfirm.get();
                    this._initChange = true;
                    // I want to bypass the confirm if the value is not valid (for example after 1st load with blank values).
                    if (old == null || old == 'undefined' || old == 'NaN') this.bindings.valueConfirm.set(value); // Update the View-Model
                    else {
                        if (confirm("Are you sure?")) {
                            this.bindings.valueConfirm.set(value); // Update the View-Model
                        }
                        else {
                            this._initChange = false;
                            this.refresh(); // Reset old value
                        }
                    }
                this._initChange = false;
            },
            destroy: function () { // dunno if this is useful
                this.widget.unbind("change", this._change);
            }
        });

MVVM-KendoNumericTextBox restore previous value without triggering 'change' twice

2 Answers2