This is a migrated thread and some comments may be shown as answers.

NumericTextBox min value behavior

7 Answers 2996 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Suresh
Top achievements
Rank 1
Suresh asked on 27 Sep 2012, 08:04 PM
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

7 Answers, 1 is accepted

Sort by
1
Jeff Van Dyk
Top achievements
Rank 2
answered on 30 Jan 2013, 10:55 PM
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?
-1
Georgi Krustev
Telerik team
answered on 01 Feb 2013, 10:16 AM
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!
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 21 Jan 2022, 05:54 PM | edited

The problem with this option is that the arrows then allow the user to select invalid options and they don't start at the minimum value. For example, the values can be null or 1000 - 2000. A user clicks the up arrow and gets 1. They tab away and it is changed to 1000 when they might not want 1000. In this case they probably want null. Furthermore, to get to 1000 they would have to click up 1000 times. 
0
Kyle
Top achievements
Rank 2
Veteran
answered on 31 Jan 2014, 03:49 PM
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.
0
Alexander Popov
Telerik team
answered on 05 Feb 2014, 03:30 PM
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!
0
Jeffrey
Top achievements
Rank 1
answered on 19 Nov 2015, 12:43 AM

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);
});

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 21 Jan 2022, 06:31 PM

I went to the demo and when I click the up arrow I get an endless loop saying 11 is out of range. The value changes between 10 and 10.0. 
Georgi Denchev
Telerik team
commented on 26 Jan 2022, 10:00 AM

An alternative variation of the _adjust method override can be found in the following forum thread:

https://www.telerik.com/forums/kendo-numeric-text-box-out-of-range-changing-to-min-or-max 

1
Elliot
Top achievements
Rank 1
answered on 19 Nov 2015, 04:42 PM

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.

0
Elliot
Top achievements
Rank 1
answered on 19 Nov 2015, 07:10 PM
I have created a user voice suggestion here.  If this behaviour is important to you please vote to have it changed.
Tags
NumericTextBox
Asked by
Suresh
Top achievements
Rank 1
Answers by
Jeff Van Dyk
Top achievements
Rank 2
Georgi Krustev
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Alexander Popov
Telerik team
Jeffrey
Top achievements
Rank 1
Elliot
Top achievements
Rank 1
Share this question
or