Rounding with NumericTextBox

[Mohamed]

Greetings,

I'm using the Numeric Text Box and I want to limit the number of decimal the user is allowed to enter to a certain value, Let's say 3

I'm seeing the decimals property to 3 and the format to n3

The display is working fine but the user is allowed to input 1.999999 for example and it will be rounded to 2.000

I want it to be 1.999, either by limiting the input or, what I tried to do is forcing the value to be 1.999.

I tried using the onchange event but when the event is fired, the value is already rounded to 2.

 

Any help on this, 

Thanks,

[Alexander Valchev]

Hi Mohamed,

You have to specify the precision, number of decimals.
Here is a small example: http://jsbin.com/tojafiviya/edit?html,css,js,output

Regards,
Alexander Valchev
Telerik

 

 

[Mohamed]

Hi Alexander,

Thanks for your reply, but this doesn't resolve my problem as I'm already specifying the precision.

in your example you set the decimals to 16, in my case I need it to be three. Here is how you can replicate my issue withing your example:

change the decimals to be 3.

Input the following value : 1.9999 (notice that you can put a number with decimals exceeding 3)

Tab out, the value will change to 2.000; this is my issue. I need it to be 1.999 either by only allowing 3 decimals in the input or by disabling the rounding.

I tried use the following function for the onchange event, but it didn't work as the value was already rounded to 2.000 when the event is fired.

function displayMyNumberProperly(e) {
    var mult = Math.pow(10, this.options.decimals);
    if (this.value() > 0) {
        this.value(Math.floor(this.value() * mult) / mult)
    } else {
        this.value(Math.ceil(this.value() * mult) / mult)
    }
};

 

[Alexander Valchev]

Hi Mohamed,

The rounding cannot be turned off completely. The best we can offer is to set a precision.
Please check this forum thread for more information.

Regards,
Alexander Valchev
Telerik

 

 

[Mohamed]

Thanks Alexander,

Setting the precision to 16 and using my onchange function, with small changes to extract the real decimal value from the format,gave me what I'm looking for for now.

I hope we will be able to limit the number of decimals digits the user can input in the future.

 

 

[thuy]

Hello Alex,

I faced the same issue when  trying to setup a control like this. The "maxRate" has been defined by very big number (> 16 digits), but the control auto rounded for ex: 9999999999999999.00 =>10000000000000000.00, or 1111111111111111.00 => 11111111111111112.00, and the number is too long, it's became : 1.23e+20 (~1.23 and 20 digits 0). Do you have any update ?

$("#controlId").kendoNumericTextBox({
    min: 0.01,
    max: maxRate,
    format: "n2",
    step: 0.01
});

[Georgi Krustev]

Hello thuy,

In general, JavaScript Number object loses precision after the 16th digit and we cannot do much here. I am afraid that really big numbers  cannot be used in NumericTextBox. You can find a detailed information on the case here:

• http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/overview#value-precision

Regards,
Georgi Krustev
Telerik

 

 

[thuy]

Thank you Georgi, it's help me alot.

Best Regards,

[Alex]

You can now use the RestrictDecimals attribute to prevent rounding

 

 

    @(Html.Kendo().NumericTextBoxFor(m => m)
            .Value(finalValue)
            .Decimals(decimalPlaces)
            .RestrictDecimals(restrictDecimals)
            .Factor(factor)
            .Format(formatString)
            .Step(step)
            .Max(max)
            .Min(min)
            .Events(e =>
            {
                if (onChangeFunction.HasAValue())
                {
                    e.Change(onChangeFunctionInternal);
                }
            })
            .HtmlAttributes(attributes)