New to Kendo UI for jQuery? Download free 30-day trial

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

In this article