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

Rounding with NumericTextBox

8 Answers 282 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Mohamed
Top achievements
Rank 1
Mohamed asked on 14 Mar 2016, 08:11 PM

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,

8 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 16 Mar 2016, 03:15 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mohamed
Top achievements
Rank 1
answered on 16 Mar 2016, 03:24 PM

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

 

0
Alexander Valchev
Telerik team
answered on 18 Mar 2016, 03:30 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mohamed
Top achievements
Rank 1
answered on 18 Mar 2016, 05:20 PM

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.

 

 

0
thuy
Top achievements
Rank 1
answered on 11 May 2016, 09:06 AM

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

0
Georgi Krustev
Telerik team
answered on 13 May 2016, 07:01 AM
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:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
thuy
Top achievements
Rank 1
answered on 16 May 2016, 03:44 AM

Thank you Georgi, it's help me alot.

Best Regards,

0
Alex
Top achievements
Rank 1
answered on 29 Jan 2020, 01:33 PM

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)

Tags
NumericTextBox
Asked by
Mohamed
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Mohamed
Top achievements
Rank 1
thuy
Top achievements
Rank 1
Georgi Krustev
Telerik team
Alex
Top achievements
Rank 1
Share this question
or