Keeping Trailing Zeros in the NumericTextBox

Environment

Product	Progress Telerik UI for ASP.NET Core NumericTextBox
Progress Telerik UI for ASP.NET Core version	Created with the 2023.1.314 version

Description

When I enter the 0.0010 value, it renders 0.001. When the component loses focus, it re-formats the number to 0.0010.

How can I format the number in a Telerik UI for ASP.NET Core NumericTextBox so that it shows four decimal places?

Solution

To achieve the desired result:

1. Create a common function that will add the trailing zeros programmatically.
2. Add the trailing zeros when you change the value through the Spin buttons by subscribing to the Spin event and call the common function.
3. Add the trailing zeros when the NumericTextBox's input is focused by subscribing to the focus event by using the HtmlAttributes() configuration method and call the common function.

You can further elaborate on the example to reflect the globalization practices and check if the decimals are properly rendered when used on multiple NumericTextBoxes.

Index.cshtml

    @(Html.Kendo().NumericTextBox<double>()
        .Name("currency")
        .Format("n4")
        .Decimals(4)
        .Value(0.0010)
        .Events(events => events.Spin("onSpin"))
        .HtmlAttributes(new {onfocus = "onFocus(event)" })
    )

Script.js

    <script>
        function onSpin(e){ 
            var inputElement = this.element;
            addTrailingZeros(inputElement,this); // Pass both the input element and client-side reference of the widget to the common function.     
        }
        function onFocus(event){
            var inputElement = $(event.target);
            var numeric = $(inputElement).data("kendoNumericTextBox");
            addTrailingZeros(inputElement, numeric); // Pass both the input element and client-side reference of the widget to the common function.     
        }
        function addTrailingZeros(input, numeric) {
            // Floats Scenario
            if (input.val().split(".").length > 1
                && input.val().split(".")[1].length < numeric.options.decimals) { // Assert whether the floating input has missing zeros.
                var inputValue = input.val() + "0"; // Append the trailing zero to the input's value.
                input.val(inputValue); // Change the input's value.
            }
            // Integers Scenario
            if (input.val() && input.val().split(".").length === 1) { // Assert whether the integer input has missing zeros.
                var inputValue = input.val() + "." + Array(numeric.options.decimals + 1).join("0"); // Append the trailing zero to the input's value.
                input.val(inputValue); Change the input's value.
            }
        }
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on keeping the trailing zeros in the NumericTextBox.

More ASP.NET Core NumericTextBox Resources

• ASP.NET Core NumericTextBox Product Page
• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the NumericTextBox for ASP.NET Core
• Server-Side API Reference of the NumericTextBox for ASP.NET Core
• Telerik REPL: Keeping Trailing Zeros in the NumericTextBox
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base