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:
$("#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>