NumericTextBox min value behavior

8 posts, 0 answers
  1. Suresh
    Suresh avatar
    1 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2012 Link to this post

    When I set min value for a KendoNumericTextBox, it automatically changes to the minimum value, instead of showing error saying that need to have minimum value. How do I change the behavior.

    var numericBox = $("#numeric_" + attrObj.AttributeId).data("kendoNumericTextBox");
    numericBox.min(5);
    numericBox.validationMessage = "Please enter value 5 and above";

    So when I enter 3 for example in the above numberBox, it is supposed to give an error saying "Please enter value 5 and above". Instead the value of the box changes to 5 and no error is shown. This behavior is not acceptable. Is there anyway I can change this?

    Thanks,
    Suresh
  2. Jeff Van Dyk
    Jeff Van Dyk avatar
    12 posts
    Member since:
    Oct 2012

    Posted 30 Jan 2013 Link to this post

    I am interested in overriding the min/max behavior as well.  We find that our users won't notice that a value is reset to max or min when they enter an invalid value.  Is there a way to allow the validation to fire instead of resetting the values?
  3. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 01 Feb 2013 Link to this post

    Hello,

     
    You can set the min and max values to null. Thus the widget will not reset the typed value on blur.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kyle
    Kyle avatar
    17 posts
    Member since:
    Aug 2011

    Posted 31 Jan 2014 Link to this post

    Is there ANY way to get the OP's desired behavior?  Using MVC, we need to validate the min/max, and prefer to do so with the DataAnnotations.  However, as the OP stated, our users (and product management), thinks not showing a clear error to the user is unacceptable.

    I attempted to hook into the change event, but the _old and _new properties match every time, and it would have been doable if those values showed the _old as [some giant number] and _new as [the max that we defaulted to].  Then I could show an error.

    Please, any assistance would be appreciated.
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Feb 2014 Link to this post

    Hi Kyle,

    I am afraid that the described behavior is currently not supported out of the box, however similar behavior could be achieved using a Kendo UI Validator with custom rule. For example:  
    <div id="example">
    @(Html.Kendo().NumericTextBox()
        .Name("MyNumber")
        .HtmlAttributes(new {data_val_msg = "My Special error message." }) //used to pass a custom validation message to the validator
        .Min(5)
        .Max(10)
        .Placeholder("Enter numeric value")
    )
    @Html.ValidationMessage("MyNumber")
    <br />
    @(Html.Kendo().NumericTextBox()
        .Name("MyOtherNumber")
        .Min(5)
        .Max(10)
        .Placeholder("Enter numeric value")
    )
    @Html.ValidationMessage("MyOtherNumber")
    </div>
    <script>   
        $("#example").kendoValidator({
            rules: {
                myRule: function (input) {
                    if (input.is("[data-role='numerictextbox']")) {
                        var min = parseInt($(input).attr("min"));
                        var max = parseInt($(input).attr("max"));
                        var val = parseInt(input.val());
                        if (val < min || val > max) {
                            return false;
                        }
                        return true;
                    }
                    return true;
                }
            },
            messages: {
                myRule: function (input) {
                     
                    var min = $(input).attr("min");
                    var max = $(input).attr("max");
                    var msg = "Please enter number between " + min + " and " + max;
                    var customMsg = $(input).attr("data-val-msg");
                    if (customMsg) {
                        return customMsg;
                    } else {
                        return msg;
                    }
                }
            }
        });
    </script>

    It is possible to replace the min and max options with data attributes, thus preventing the widget from changing the value if it is out of range. Then in the custom rule you could get the min and max values through the attributes and proceed with the validation. For example:  
    @(Html.Kendo().NumericTextBox()
        .Name("MyNumber")
        .HtmlAttributes(new {data_min = 5, data_max = 10, data_val_msg = "My Special error message." })
    ...
     
    myRule: function (input) {
        if (input.is("[data-role='numerictextbox']")) {
            var min = parseInt($(input).attr("data-min"));
            var max = parseInt($(input).attr("data-max"));
    ...


    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Jeffrey
    Jeffrey avatar
    15 posts
    Member since:
    Dec 2010

    Posted 18 Nov 2015 in reply to Suresh Link to this post

    I received similar project requirements and solved it by simple hacking.  What I did is to replace the _adjust function to my version to add "outOfRange" event triggers when value is not between max and min. Here is the demo.

    Notice: this hacking may be broken after Kendo UI upgrade.

    $("#numeric").kendoNumericTextBox();
    var ntb = $("#numeric").data("kendoNumericTextBox");
      //hacking, trigger event when out of range
      ntb._adjust = function(value) {
        var that = this,
        options = that.options,
        min = options.min,
        max = options.max;
     
        if (value === null) {
            return value;
        }
        var invVal = value, element = this.element;
        if (min !== null && value < min) {
          setTimeout(function() {
            element.trigger("outOfRange", { value:invVal, max: max, min: min });
          }, 1);
          value = min;
        } else if (max !== null && value > max) {
          setTimeout(function() {
            element.trigger("outOfRange", { value:invVal, max: max, min: min });
          }, 1);
            value = max;
        }
        return value;
    };
    $("#numeric").bind("outOfRange", function(e, data) {
      if (data.value > data.max)
        alert("Value " + data.value + " is greater than Max: " + data.max);
      else if (data.value < data.min)
        alert("Value " + data.value + " is less than Min: " + data.min);
    });

  8. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 19 Nov 2015 in reply to Jeffrey Link to this post

    We use Angular validation and would like an error message as well.  Is it still not supported to raise a validation error without changing the value? 

    I cant see how it is ever acceptable to just change the users input.  Telerik should really reconsider this functionality.

  9. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 19 Nov 2015 Link to this post

    I have created a user voice suggestion here.  If this behaviour is important to you please vote to have it changed.
Back to Top
Kendo UI is VS 2017 Ready