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

5 posts, 1 answers
  1. Erik
    Erik avatar
    6 posts
    Member since:
    Aug 2012

    Posted 08 Aug 2012 Link to this post

    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!
  2.
  3. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 09 Aug 2012 Link to this post

    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
  5. Erik
    Erik avatar
    6 posts
    Member since:
    Aug 2012

    Posted 10 Aug 2012 Link to this post

    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
  7. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 10 Aug 2012 Link to this post

    Your welcome :-)  Glad to see that it worked out well for multiple text boxes.
  8.
  9. Mihail
    Mihail avatar
    9 posts
    Member since:
    Jul 2015

    Posted 28 Jul 2016 Link to this post

    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.
Back to Top