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:

1. Initialize the NumericTextBox with a default format.
2. Use the change event to check the current value of the NumericTextBox.
3. If the value is zero, update the format to show double zeros using setOptions().
4. 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>

See Also

• NumericTextBox Change Event Documentation
• NumericTextBox Overview