New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Keeping Trailing Zeros in the NumericTextBox

Environment

Product	Progress Telerik UI for ASP.NET MVC NumericTextBox
Progress Telerik UI for ASP.NET MVC 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 MVC NumericTextBox so that it shows four decimal places?

Solution

To achieve the desired result:

Create a common function that will add the trailing zeros programmatically.
Add the trailing zeros when you change the value through the Spin buttons by subscribing to the Spin event and call the common function.
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.

Keeping Trailing Zeros in the NumericTextBox

Environment

Description

Solution

More ASP.NET MVC NumericTextBox Resources

See Also