Restricting Decimals in Kendo UI NumericTextBox

Environment

Product	Kendo UI for jQuery
Version	2024.1.319

Description

I want the Kendo UI NumericTextBox to display only integers, without any decimal points. How can I achieve this?

This KB article also answers the following questions:

• How to configure NumericTextBox to prevent decimal input?
• How to ensure the NumericTextBox only displays integer values?
• How to format NumericTextBox to exclude decimal points?

Solution

To restrict the Kendo UI NumericTextBox to only accept and display integers, use the decimals, restrictDecimals, and format configuration options. Set decimals to 0 to prevent decimal inputs, restrictDecimals to true to ensure that no decimal points can be entered, and add the needed format with zero digits for decimals.

Here is a sample configuration:

javascript

$("#numericTextBox").kendoNumericTextBox({
    value: 123.456, // Initial value
    decimals: 0,
    restrictDecimals: true,
    format: "c0"
});

The above configuration ensures that the NumericTextBox component will:

• Not allow users to input decimal values.
• Display the value as an integer without decimal points.
• Format the display value without any decimal fraction.

For an interactive example, refer to the example below:

   <input id="numerictextbox" />
    <script>
      $("#numerictextbox").kendoNumericTextBox({
        value: 123.456,
        decimals: 0,
        restrictDecimals: true,
        format: "n0"
      });
    </script>

See Also

• Official NumericTextBox Documentation
• NumericTextBox API
• Number Formatting