Custom Display for Zero Values in NumericTextBox
Environment
Product | NumericTextBox for Progress® Kendo UI® |
Version | 2024.4.1112 |
Description
I want to change my existing NumericTextBox to display a custom format when the value is zero. Specifically, double zeros should be displayed for zero values, whereas all other values should be displayed normally.
This KB article also answers the following questions:
- How to customize the zero value display in NumericTextBox?
- Can I format the zero value differently in a NumericTextBox?
- Is it possible to show double zeros for a zero value in NumericTextBox?
Solution
To achieve custom formatting for zero values in a NumericTextBox, utilize the change
event and the setOptions()
method to conditionally update the format.
Here's how to implement this approach:
- Initialize the NumericTextBox with a default format.
- Use the
change
event to check the current value of the NumericTextBox. - If the value is zero, update the format to show double zeros using
setOptions()
. - If the value is not zero and the current format is set to show double zeros, revert back to the default format.
<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox({
format: "0",
change: function(e) {
if(e.sender.value() === 0) {
e.sender.setOptions({
format: "0.0"
})
} else {
if(e.sender.options.format == "0.0") {
e.sender.setOptions({
format: "0"
})
}
}
}
});
</script>