Define Decimals Property at Runtime in NumericTextBox

Environment

Product	Progress® Kendo UI® NumericTextBox for jQuery
Product Version	2019.1.115

Description

How can I change the decimals property of the Kendo UI NumericTextBox at runtime from two decimal places to three?

Solution

1. Set the format of the NumericTextBox initially to n2.
2. When an event has occurred, such as a button click, get a reference to the NumericTextBox.
3. Get the value of the NumericTextBox.
4. By using the setOptions method, configure the value, format, and decimals properties.

    <input id="numericTextBox1" />

    <button class="k-button">Change Decimal</button>
    <script>   
      $("#numericTextBox1").kendoNumericTextBox({
        decimals: 2,
        format: "n2",
        value: 11.1234,
        step: 0.01,
      });

      $("button").click(function() {
        var numTextBox = $('#numericTextBox1').data('kendoNumericTextBox');
        var numValue = numTextBox.value();
        numTextBox.setOptions({ value: numValue, format: "n3", decimals: 3, step: 0.001});
      });
    </script>

See Also

• API Reference of format
• API Reference of value
• API Reference of setOptions
• API Reference of decimals