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

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

In this article