Allow users to type percentages in full and not as decimals /100

[BAx]

Hello,

When I use the Numeric Textbox in Blazor, I need to type the value I intend divided by 100.

e.g.

20% => 0.2

17.5 => 0.175

This is inconvenient for our users.

Is this a supported feature?

Thank you

[Sevvandhi Nagulan]

Hi Alessio, 

Greetings from Syncfusion support. 

We checked your query. The percentage textbox converts the entered value to a percentage by multiplying it by 100 by default. If you want to override this behavior, you can achieve the stated requirement by dividing the entered value by 100, setting it to component in the change event. Also set the format as p2. Kindly refer the below code. 

<SfNumericTextBox TValue="decimal?" Format="p2"  @bind-Value="value"> 

    <NumericTextBoxEvents TValue="decimal?" ValueChange="onChange"></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

@code{ 

 

 

    public decimal? value { get; set; } 

    public void onChange(ChangeEventArgs<decimal?> args) 

    { 

        if (args.PreviousValue != (args.Value * 100)) 

        value = args.Value / 100; 

    } 

} 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NumericTextBox392299401 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[BAx]

Hello Sevvandhi Nagulan,

This solves the issue on typing, however when the user gets back in the text box the value presented is /100.

eg.

types 23.2 => exit the field => shows 23.2% => gets back in the field => shows 0.232

This is not ideal,

Thank you

[Sevvandhi Nagulan]

Hi Alessio, 

We checked your query. The reported requirement can be achieved by providing the custom format to the component.  Kindly refer the following code. 

 

<SfNumericTextBox TValue="decimal?" @bind-Value="value" Format="#######0.#####'%'"> 

    <NumericTextBoxEvents TValue="decimal?" ValueChange="onChange"></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

@code{ 

 

 

    public decimal? value { get; set; } 

    public void onChange(ChangeEventArgs<decimal?> args) 

    { 

        if (args.PreviousValue != (args.Value * 100)) 

            value = args.Value / 100; 

    } 

 

} 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NumericTextBox-1138120659 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[BAx]

Sevvandhi,

I downloaded your example and unfortunately it does not work.

Get inside the texbox => Type 20 => Leave the textbox => 0.2% is shown => get back inside the text box => 0.2 is shown

What I want is 

Get inside the texbox => Type 20 => Leave the textbox => 20% is shown.=> get back inside the text box => 20 is shown

Thank you

[Sevvandhi Nagulan]

Hi BAx, 

We checked your query. We modified the code as per the requirement. Kindly refer the below code and screenshot. 

<SfNumericTextBox TValue="decimal?" @bind-Value="value" Format="#######0.#####'%'"> 

</SfNumericTextBox> 

 

@code{ 

 

 

    public decimal? value { get; set; } 

 

} 

Screenshot: 

 

 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N