Handle event when value higher than max is typed in and trimmed by numericTextBox

[Erik]

Hi, I'm looking for a way to catch when a user types in a value that is higher than the max of a numericTextBox before it gets trimmed down by the component. The point of this is to alert the user that they have entered invalid data and inform them of the max possible value.

For example, if I type 120 into a textbox with a max of 100, I would like to let the user know that they have gone over the max value.

Is there any way to handle such an event? I've already tried using the change method to no avail, as I am unable to access the original value typed into the textbox. The only thing I can think of is removing the max and min parameters on my numericTextBox and handling everything with a Kendo Validator, but this option seems pretty intensive for what seems like a relatively simple task.

Thanks for any help!

[John DeVight]

Hi Erik,

There isn't an event for this, but you can create one by overriding the "_adjust" function that will raise an event before calling the original _adjust function.

If I have a numericTextBox defined as follows:

var _numeric = $("#numeric").kendoNumericTextBox({

    min: 0,

    max: 100

}).data("kendoNumericTextBox");

I could override the "_adjust" function and raise an event like this:

_numeric._originalAdjust = _numeric._adjust;

_numeric._adjust = function() {

    if (arguments[0] < this.min() || arguments[0] > this.max()) {

        this.trigger("invalid", arguments[0]);

    };

    return _numeric._originalAdjust.apply(this, arguments);

};

Then I can subscribe to the event like this:

_numeric.bind("invalid", function(value) {

    if (console !== undefined) console.log(value + " is invalid");

});

Attached is a working example.

Hope this helps.

Regards,

John DeVight

[Erik]

Thanks John! Your solution worked perfectly. It can even be put into a function to make binding the max-min invalidation events easy for multiple text boxes:

var textbox1 = $('#textbox1').data('kendoNumericTextBox');
var textbox2 = $('#textbox2').data('kendoNumericTextBox');

bindMaxMinErrors(textbox1);
bindMaxMinErrors(textbox2);

function bindMaxMinErrors(_numeric) {

    _numeric._originalAdjust = _numeric._adjust;

    _numeric._adjust = function() {

       if (arguments[0] < this.min() || arguments[0] > this.max()) {

           this.trigger("invalid", arguments[0]);

        };

        return _numeric._originalAdjust.apply(this, arguments);

    };

 

    _numeric.bind("invalid", function(value) {

        if (console !== undefined) console.log(value + " is invalid");

    });

}

Thanks again for your ingenious solution. I never would have figured that out of my own!

Cheers,
Erik

[John DeVight]

Your welcome :-)  Glad to see that it worked out well for multiple text boxes.

[Mihail]

I have similar situation. And the solutions is:

var adjustHandler = function(number) {

    if ( this.max() < number) {
        this.trigger('invalid', number);
    }

    return number;
}

$('[data-role="numerictextbox"]').each(function(index, element) {
    var kendoNumeric = $(element).data('kendoNumericTextBox');
    kendoNumeric._originalAdjust = kendoNumeric._adjust;
    kendoNumeric._adjust = adjustHandler;

})

Select all numeric text boxes and configure them.