This is a migrated thread and some comments may be shown as answers.

Allow user to enter .10 or 10%

1 Answer 89 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 02 Jan 2020, 10:54 PM
     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
});

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 06 Jan 2020, 04:10 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
NumericTextBox
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Nikolay
Telerik team
Share this question
or