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
Spinevent and call the common function. - Add the trailing zeros when the NumericTextBox's input is focused by subscribing to the
focusevent by using theHtmlAttributes()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.
@(Html.Kendo().NumericTextBox<double>()
.Name("currency")
.Format("n4")
.Decimals(4)
.Value(0.0010)
.Events(events => events.Spin("onSpin"))
.HtmlAttributes(new {onfocus = "onFocus(event)" })
)
<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 MVC NumericTextBox Resources
- ASP.NET MVC NumericTextBox Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums