Keep Trailing Zeros in NumericTextBox

Environment

Product Version	2018.1 117
Product	Progress® Kendo UI® NumericTextBox for jQuery

Description

When I enter the 0.0010 value, it renders 0.001. When the widget loses focus, it reformats the number to 0.0010.

How can I format the number in a NumericTextBox so that it shows four decimal places?

Solution

This functionality is not part of the built-in NumericTextBox settings but is already submitted as a feature request in the UserVoice forum. Popular requests get prioritized on the team's roadmap. To upvote the feature request, refer to https://feedback.telerik.com/kendo-jquery-ui/1359131-numerictextbox-should-display-decimal-portion-even-when-zero.

Suggested Workaround

Add the trailing zeros programmatically both on spin and on focus of the input. You can further elaborate on the example so it reflects the globalization practices and check if the decimals are properly rendered when used on multiple NumericTextBoxes.

    <input id="numerictextbox" />
        <script>
          var numeric = $("#numerictextbox").kendoNumericTextBox({
            format: "n4",
            decimals: 4,
            step: 0.0001,
            restrictDecimals: true,
            spin: function(e){
              var inputElement = this.element;
             addTrailingZeros(inputElement,this);          
            }
          }).on("focus", function(e){
            var inputElement = $(this);
            addTrailingZeros(inputElement,numeric)
          }).data("kendoNumericTextBox");

          function addTrailingZeros(input, numeric){
            // floats
            if(input.val().split(".").length > 1
               && input.val().split(".")[1].length < numeric.options.decimals){
              var inputValue = input.val() + "0";
              input.val(inputValue);
            }
            // integers
            if(input.val() && input.val().split(".").length === 1){
              var inputValue = input.val() + "." + Array(numeric.options.decimals + 1).join("0");
              input.val(inputValue);
            }          
          }
    </script>