Numeric input. Right aligned

[Antonio Paglia]

I'm using SfMaskedTextBox for a numeric input but I'm not able to right align the number while typing. 
The database field is type varchar. 

This is what I get.
  


This is what I want but I don´t know to accomplish that.

 

Any idea will be appreciated.


​

[Buvana Sathasivam]

Hi Antonio,

Thank you for reaching out to us with your query.

To achieve the desired behavior, you can enable the "EnableRtl" property. Here's a code example to help you get started:

<SfMaskedTextBox Mask="000-000-0000" EnableRtl="true"></SfMaskedTextBox>

Sample: https://blazorplayground.syncfusion.com/LDrAMDANpIXHBFfp

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_EnableRtl

Regards,

Buvana S

[Antonio Paglia]

Hi. Thanks for reply. 

I think that enableRtl doesn't fit what I need.  Right align the number while typing it is correct but the most important is to find a mask or any other thing that replace leading zeros by spaces. For example.

If you have a mask like 0000000 and you type "123" then the component will return -> " 123" (replace 0 by leading spaces)

Is there a way to accomplish that ?

Thanks in advances

[Antonio Paglia]

Hi. Thanks for reply. 

I think that enableRtl doesn't fit what I need.  Right align the number while typing it is correct but the most important is to find a mask or any other thing that replace leading zeros by spaces. For example.

If you have a mask like 0000000 and you type "123" then the component will return -> " 123" (replace 0 by leading spaces)

Is there a way to accomplish that ?

Thanks in advances

[Buvana Sathasivam]

Hi Antonio,

By default, non-filling blank spaces in the mask are replaced with an empty string in the Value property. You can easily customize this behavior by using the PromptPlaceholder property. To achieve your specific requirement, set the PromptPlaceholder property to an empty space, like this:

@code {

    public char PromptPlaceHolder { get; set; } = ' ';

}

Additionally, to include mask literals in the returned value, make sure to enable the EnableLiterals property. You can do this by setting it to true in your code as shown below:

<p>@maskValue</p>

 <SfMaskedTextBox Mask="000-000-0000" PromptPlaceholder="@PromptPlaceHolder" EnableLiterals=true @bind-Value=@maskValue EnableRtl=true></SfMaskedTextBox>

@code {

    private string maskValue;

    public char PromptPlaceHolder { get; set; } = ' ';

}

Sample: https://blazorplayground.syncfusion.com/hZBKCNqMfAZUYakQ

For more detailed information and usage examples, please check out our documentation links:

https://blazor.syncfusion.com/documentation/input-mask/mask-configuration#prompt-placeholder

https://blazor.syncfusion.com/documentation/input-mask/mask-configuration#include-literals-in-the-value

For complete API details, you can refer to the following links:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_EnableLiterals

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_PromptPlaceholder

If the information provided does not fully address your requirements, could you please provide more details or clarify your specific needs? This will help us better understand your query and provide a more tailored and precise solution.

Regards,

Buvana S