javascriptjquerykendo-uikendonumerictextbox

How to disable dots on Kendo UI NumericTextBox?


I need to make a numeric field only integer, so that the field does not accept decimals. I would not even like the field to approximate, simply not accepting points or commas.

Based on the culture, it accepts the numeric separator (eg EN is the point, IT is the comma)

Here is the code I tried

$("#numerictextbox").kendoNumericTextBox({
     culture: "en-US",
     step: 500,
     spinners: false,
     format: "#",
     decimals: 0
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
 <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/cultures/kendo.culture.en-US.min.js?bust=v21"></script>
</head>
<body>
  
<input id="numerictextbox" />
</body>
</html>

Here you can find the link to dojo with the example of Italian culture, in this case it blocks the comma


Solution

  • Try using the restrictDecimals configuration option.

    $("#numerictextbox").kendoNumericTextBox({
        culture: "en-US",
        step: 500,
        spinners: false,
        format: "#",
        decimals: 0,
        restrictDecimals: true
    });
    

    With this configuration a comma and a point with behave like entering a letter(red exclamation flash).

    Example