Avoiding Percentage-Value Multiplicity in the NumericTextBox

Environment

Product

Progress® Kendo UI® for Angular NumericTextBox

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:

html

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

The following example demonstrates the custom format in action.

Change Theme

Theme

Loading ...