Edit this page

Keep Trailing Zeros in NumericTextBox

Environment

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

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 http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/6696197-numerictextbox-should-display-decimal-portion-even.

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.

Example
    <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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy