Problem with spin buttons and decimals

[Petr]

Dear,

I use RadNumericTextBox with these options: 
 MinValue = 0
 MaxValue = 9999999
 NumberFormat.DecimalDigits = 2
 MaxLength = 10
 ShowSpinButtons = true

I see specific problem when I use any decimals. When I click on arrows (or type keyboard arrows) it increases/decreases by 1, but sometimes it stops on specific number (e.g. for 8.42 arrow down do nothing or for 63.42 arrow up doesn't work). I think there is a problem with javascript rounding and 8.42 - 1 is sometimes like 7.419999999999. It looks like a inner bug of the component.

Is it possible to format number first and make validation of length aftewards?
Is there any workaround for it?

Thank you

[Rumen]

Hi Petr,

I tested this scenario using the latest version of Telerik UI for ASP.NET AJAX and was unable to reproduce the issue. The spin buttons on the RadNumericTextBox worked as expected with decimal values, including edge cases like 8.42 or 63.42.

However, the behavior you are observing can occur in some cases due to how JavaScript handles floating-point arithmetic on the client side. For example, subtracting 1 from 8.42 may internally result in 7.419999999999999, which could interfere with value validation (e.g., when MaxLength is applied or precision rounding is enforced).

Additionally, please note that the MaxLength property limits the number of characters, not numeric value, which can lead to inconsistent behavior when decimals are involved.

 

Limitations of RadNumericTextBox

• The control uses Double on the server and float on the client, and does not support true Decimal precision.
• Rounding and formatting occur after the spin operation, but floating-point math can still cause unexpected results.
• MaxLength can interfere with decimal input and is not recommended for numeric fields.
• The control cannot guarantee a specific number of decimal digits based on user input—trailing zeros may be added or omitted depending on rounding settings.

Recommended Workarounds

1. Format Value in Client-Side Events

You can use the OnClientValueChanged event to round and set the value to two decimal places after each spin:

        <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server"
            MinValue="0"
            MaxValue="9999999"
            MaxLength="10"
            ShowSpinButtons="true" AllowOutOfRangeAutoCorrect="false">
            <NumberFormat DecimalDigits="2" />
            <ClientEvents OnValueChanged="OnClientValueChanged" />
        </telerik:RadNumericTextBox>
        <script>
            function OnClientValueChanged(sender, eventArgs) {
                var value = sender.get_value();
                console.log(value);
                if (value != null) {
                    var rounded = Math.round(value * 100) / 100;
                    sender.set_value(rounded);
                }
            }
        </script>

Attach this function to the OnClientValueChanged property of your RadNumericTextBox.

2. Remove MaxLength Property

• MaxLength is not reliable for numeric input with decimals. Remove it and rely on MinValue and MaxValue for validation.
• More information: The MaxLength setting is not specific to RadNumericTextBox, but rather inherited from <asp:TextBox ... MaxLength="5">. It may be useful with text based input scenarios, but with number it can prove error-prone. For example, it will allow a user to type in 413, but it will prevent him when he tries to enter 41.3. Therefore, you can remove the MaxLength property altogether and rely on the MaxValue property.

Regards,
Rumen
Progress Telerik

[Petr]

I am using version 2022.3.1109.45 which is not the latest one, but I didn't find in latest releases any changes for NumericTextBox related to this issue.

I am sorry, I gave you wrong sample. The problem is not with 8.42, but it is with 8.3 (8.3 - 1 = 7.300000000000001). Similar problem is with 16.42 (15.420000000000002) and if you try to press arrow up it will stop on 127.42 (128.42000000000002).

Set property AllowOutOfRangeAutoCorrect to false doesn't make any effect to my problem. It is only ignoring max and min value.

I also tried to add code to events OnValueChanged and OnValueChanging, but they are invoked too late so I was unable to round the number after the change.

I have 50px wide numeric input on my page and using property MaxLength is simple method how to avoid to insert too many digits.

I will use MaxLength option only to numbers without decimals.

Thank you