Define Decimals Property at Runtime in NumericTextBox

Environment

Product NumericTextBox for ProgressĀ® Kendo UIĀ®
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

In this article
Not finding the help you need? Improve this article