Allow user to enter .10 or 10%

[Lee]

     I have a numericTextBox and I would like the user to be able to enter a percentage in either of two formats. The end result should always display the number as a percentage but store it as a decimal. For example, the user should be able to either enter .10 or 10% in the box. The screen should then show 10% when the user tabs out but send .1 when the form is submitted. Here is what I have so far: 

$("#myPercentageChoice").kendoNumericTextBox({
    format: "p1",
    spinners: false,
    value: 0,
    decimals: 3
});

[Nikolay]

Hello Lee,

By design, the Kendo NumericTextBox cannot accept a string as a value and so the user is not able to type "%". It converts an <input> element into a numeric, percentage, or currency textbox.

To allow the user, when typing for instance 10, the text box to show 10% I would recommend setting the following format and then in change event of the widget check if the value is below 1:

        $("#percentage").kendoNumericTextBox({
          format: "##\\%",
          value: 0,
          decimals: 3,
          spinners: false,
          change: function(e) {
        	if(this.value() < 1){
            this.value(this.value()*100)
          }
        	console.log(this.value())
        }
        });
        
      });

The above can be observed in the following Dojo demo: https://dojo.telerik.com/oMUJORov

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik