Avoiding Percentage-Value Multiplicity in the NumericTextBox

Environment

Description

How can I show percentage values without multiplying the input number by 100 when using the Kendo UI for Angular NumericTextBox?

Solution

A percentage is a dimensionless number (pure number) and it has no unit of measurement. It is a number or ratio expressed as a fraction of 100. That is the reason why entering 0.2 in the NumericTextBox component with the format option set to 'p' results in 20%.

To display percentages in the NumericTextBox and avoid modifying the input value, set the format option of the component to a custom format:

Copy Code<kendo-numerictextbox format="#.##\\%" ... ></kendo-numerictextbox>

The following example demonstrates the custom format in action.