CODEWITHSUNDEEP
javascriptjqueryhtmlkendo-ui
ZwenigHirni
ZwenigHirni

Reputation: 101

Kendo numeric textbox change event without lost focus

Is it possible to configure the kendo numeric textbox that my bound view model will receive an update when i click on the spin or change the numbers with keys? At the moment, only if the numeric text box lose the focus my view model will receive the update event.

The kendo databinding option data-value-update ... has sadly no effect on numeric text boxes

Thanks for any help

Upvotes: 10

Views: 13465

Answers (2)

Martin Shishkov
Martin Shishkov

Reputation: 2837

I know it's kinda late but here is my solution:

var numericBox = $("#yournumericinput").data("kendoNumericTextBox");
.
.
.
numericBox.element.on("keyup", function (e) {
    var newValue = e.target.value;        
    numericBox.value(newValue);
    numericBox.trigger("change");
});

That way the change event gets triggered immediately after the user has entered a new value, without having to wait for the blur event. Data validation checks are removed for brevity, but I advise you perform those as well.

And you could also bind the spin listener to trigger the change event.

numericBox.bind("spin", function (e) {
     this.trigger("change");
});

Upvotes: 9

maxspan
maxspan

Reputation: 14157

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

Upvotes: 3

Related Questions