|
| 1 | +--- |
| 2 | +title: Keeping Trailing Zeros in the NumericTextBox |
| 3 | +page_title: Always Show Trailing Zeros in the NumericTextBox |
| 4 | +description: "Learn how to always display the entire decimal portion in the Telerik UI for {{ site.framework }} NumericTextBox." |
| 5 | +slug: numerictextbox-keep-trailing-zeros |
| 6 | +tags: numerictextbox, html, helper, custom, mvc, telerik, zero, trailing, decimal, portion, float |
| 7 | +res_type: kb |
| 8 | +--- |
| 9 | + |
| 10 | +## Environment |
| 11 | + |
| 12 | +<table> |
| 13 | + <tr> |
| 14 | + <td>Product</td> |
| 15 | + <td>Progress {{ site.product }} NumericTextBox</td> |
| 16 | + </tr> |
| 17 | + <tr> |
| 18 | + <td>Progress {{ site.product }} version</td> |
| 19 | + <td>Created with the 2023.1.314 version</td> |
| 20 | + </tr> |
| 21 | +</table> |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +When I enter the `0.0010` value, it renders `0.001`. When the component loses focus, it re-formats the number to `0.0010`. |
| 26 | + |
| 27 | +How can I format the number in a Telerik UI for {{ site.framework }} NumericTextBox so that it shows four decimal places? |
| 28 | + |
| 29 | +## Solution |
| 30 | + |
| 31 | +To achieve the desired result: |
| 32 | + |
| 33 | +1. Create a common function that will add the trailing zeros programmatically. |
| 34 | +1. Add the trailing zeros when you change the value through the **Spin** buttons by subscribing to the [`Spin`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/numerictextboxeventbuilder#spinsystemstring) event and call the common function. |
| 35 | +1. Add the trailing zeros when the NumericTextBox's input is focused by subscribing to the [`focus`](https://api.jquery.com/focus/) event by using the [`HtmlAttributes()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/numerictextboxbuilder#htmlattributessystemobject) configuration method and call the common function. |
| 36 | + |
| 37 | +> 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. |
| 38 | +
|
| 39 | + |
| 40 | +```Index.cshtml |
| 41 | + @(Html.Kendo().NumericTextBox<double>() |
| 42 | + .Name("currency") |
| 43 | + .Format("n4") |
| 44 | + .Decimals(4) |
| 45 | + .Value(0.0010) |
| 46 | + .Events(events => events.Spin("onSpin")) |
| 47 | + .HtmlAttributes(new {onfocus = "onFocus(event)" }) |
| 48 | + ) |
| 49 | +``` |
| 50 | +```Script.js |
| 51 | + <script> |
| 52 | + function onSpin(e){ |
| 53 | + var inputElement = this.element; |
| 54 | + addTrailingZeros(inputElement,this); // Pass both the input element and client-side reference of the widget to the common function. |
| 55 | + } |
| 56 | + function onFocus(event){ |
| 57 | + var inputElement = $(event.target); |
| 58 | + var numeric = $(inputElement).data("kendoNumericTextBox"); |
| 59 | + addTrailingZeros(inputElement, numeric); // Pass both the input element and client-side reference of the widget to the common function. |
| 60 | + } |
| 61 | + function addTrailingZeros(input, numeric) { |
| 62 | + // Floats Scenario |
| 63 | + if (input.val().split(".").length > 1 |
| 64 | + && input.val().split(".")[1].length < numeric.options.decimals) { // Assert whether the floating input has missing zeros. |
| 65 | + var inputValue = input.val() + "0"; // Append the trailing zero to the input's value. |
| 66 | + input.val(inputValue); // Change the input's value. |
| 67 | + } |
| 68 | + // Integers Scenario |
| 69 | + if (input.val() && input.val().split(".").length === 1) { // Assert whether the integer input has missing zeros. |
| 70 | + var inputValue = input.val() + "." + Array(numeric.options.decimals + 1).join("0"); // Append the trailing zero to the input's value. |
| 71 | + input.val(inputValue); Change the input's value. |
| 72 | + } |
| 73 | + } |
| 74 | + </script> |
| 75 | +``` |
| 76 | +
|
| 77 | +For the complete implementation of the suggested approach, refer to the [Telerik REPL example on keeping the trailing zeros in the NumericTextBox](https://netcorerepl.telerik.com/cxaSaSPq400vRo8o25). |
| 78 | +
|
| 79 | +## More {{ site.framework }} NumericTextBox Resources |
| 80 | +{% if site.core %} |
| 81 | +* [{{ site.framework }} NumericTextBox Product Page](https://www.telerik.com/aspnet-core-ui/numeric-textbox) |
| 82 | +* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%}) |
| 83 | +* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui) |
| 84 | +{% else %} |
| 85 | +* [{{ site.framework }} NumericTextBox Product Page](https://www.telerik.com/aspnet-mvc/grid) |
| 86 | +* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%}) |
| 87 | +* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc) |
| 88 | +{% endif %} |
| 89 | +
|
| 90 | +## See Also |
| 91 | +
|
| 92 | +* [Client-Side API Reference of the NumericTextBox for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript//ui/numerictextbox) |
| 93 | +* [Server-Side API Reference of the NumericTextBox for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/numerictextbox) |
| 94 | +* [Telerik REPL: Keeping Trailing Zeros in the NumericTextBox](https://netcorerepl.telerik.com/cxaSaSPq400vRo8o25) |
| 95 | +* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%}) |
| 96 | +* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base) |
| 97 | +
|
0 commit comments