1. Home
  2. Forum
  3. Blazor
  4. Use dot key to obtain comma

Use dot key to obtain comma

Hi

In french culture decimal separator is comma. But in Excel, for example, we use dot key (numeric keypad) to obtain a comma. How can I reproduce this on a SfNumericTextBox component ?

I tested @onkeydown or @onkeypress and if I can capture the keyboard event I can not change key value. Even if I change key value in comma, dot is not accepted.





Any suggestion is welcome :)



10 Replies
PM Ponmani Murugaiyan Syncfusion Team May 21, 2020 01:04 PM UTC

Hello Frederic, 

Greetings from Syncfusion Support. 

We have validated your reported query. We would like to inform you that, once you have imported Localization, the French culture will not allow you to enter the dot(.) key for Numeric Textbox , will accept only the comma(,) key for decimal separators. The hard code changes will not be necessary for the control. For more information, regarding Blazor server side Localization, please refer the below documentation link and code snippet for reference. 

[Index.razor] 

@using Syncfusion.Blazor.Inputs 
 
<SfNumericTextBox TValue="int?" Value=1032323 Locale="fr"></SfNumericTextBox> 



 
Kindly check with the above sample, if issue still exists in your end or if we misunderstood your query, please get back us with additional information regarding your requirement. It will be helpful for us to provide you the solution at earliest. 
 
Regards, 
Ponmani M 


FF Frederic FOURGEOT May 30, 2022 04:17 PM UTC

Hi,

I bring up the subject. 

In France, when we use a keyboard with a numeric keypad, a dot is returned when we press the button provided for this purpose. However, software converts the dot to comma in numeric fields (notably Excel), because it's easier to enter numbers with the numeric keypad dot key. Limiting use to the comma key is a real handicap for a French user.

Do you have any solution ?

Regards,

Fred



SP Sureshkumar P Syncfusion Team May 31, 2022 09:42 AM UTC

Hi Frederic,


As per our previous update, we have supported the comma key when rendering the component by French culture loading. So, we suggest you render the component with French culture to achieve your requirement. Because by default our component supports the “en-US” format.


Regards,

Sureshkumar P


FF Frederic FOURGEOT June 23, 2022 07:31 AM UTC

I think there is a misunderstanding on the subject. In France we must be able to press the "." key to get a comma in a numeric control. The decimal separator is the comma, indeed. But we are used to entering our numerical value with the "." key of the numeric keypad wich is automatically replaced by a comma in MS Excel for example.

Your SfNumericTextBox does not allow this. We are obliged to enter the comma on the keyboard. Which is not convenient for fluent numeric input. 




Above you can see an AZERY keyboard (french format). As you can see, the numeric keypad has a "." (dot) key, not a "," (comma) key. It's therefore absolutely necessary to transform the "." to "," during a numeric entry. All software do this. From Windows calculator to MS Excel and accouting software. Otherwise imagine an accountant being forced to go get the comma key each time he enters a number with decimals. That would be insane !



SP Sureshkumar P Syncfusion Team June 24, 2022 11:40 AM UTC

We have validated the numerictextbox component. the component works as expected. We suspect that you have rendered our numerictextbox as locales with ',' as decimal separator but not changed the system settings as supported to locales with ',' as decimal separator. We suggest you change the same locale (system setting) with your local system to achieve your requirement. 

Please find the system settings.

  1. Language settings: (Deutsch as default language)

  1. System region setting:

  1. Then render the numeric textbox with the same Deutsch culture:



FF Frederic FOURGEOT June 24, 2022 12:48 PM UTC

The problem is not with the locales. Our decimal separator is indeed the comma and your control does display the comma correctly. The problem is that the numeric keypad does not return a comma but a dot. It's therefore not possible to use your control with a numeric keypad to enter decimal numbers. 


With your numeric control, when we press the dot key on the numeric keypad, nothing appens with french locales. Your control expects a comma. But we don't have a comma on the numeric keypad, just a dot. 

So MS Excel, Calculators, and other softwares transform the dot in comma when we use it. 

But your controls expects yet a comma.


So we need the dot on the numeric keypad to become a comme in your numeric control.


If you want to reproduce the problem, switch your system in French with French locales and try entering a decimal value only with the numeric keypad.









Attachment: VID_0987_511cf545.zip

FF Frederic FOURGEOT June 24, 2022 12:58 PM UTC

Here is another video. In this one I use your control versus MS Excel. You will see that with your control a numeric entry using the [.] key on numpad gives nothing (no decimals), while the same entry in MS Excel will return a decimal value with comma as decimal separator. This is the behavior we expect.


Attachment: VID_0990_c84d17ef.zip

SP Sureshkumar P Syncfusion Team June 27, 2022 06:48 AM UTC

Hi Frederic,

We have customized the sample based on your requirement when pressing the (.) in the numeric pad as convert to (,). Please find the sample below.  We would like to let you that in the provided sample, we have invoked the javascript file with decimal separator obtained in the server end with the help of CultureInfo. Therefore, on the client end, we can get the separator value based on the culture info obtained from the server end.

Find the code example here:

[index.razor]

<SfNumericTextBox ID="numeric" TValue="double?" Value=10>

     <NumericTextBoxEvents TValue="double?" Created="onCreate"></NumericTextBoxEvents>

 </SfNumericTextBox>

 

 

@code {

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

    public String Decimal{ get; set; }

 

    public async Task onCreate()

    {

        var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture.Name;

        var ci = new CultureInfo(currentCulture);

        Decimal = ci.NumberFormat.NumberDecimalSeparator;

        await JsRuntime.InvokeVoidAsync("create", "numeric",Decimal);

    }

}

 

[uploader.js]

window.create = (id, decimal) => {

    window.decimalValue = decimal;

    document.getElementById(id).addEventListener("keypress", valueChange);

}

function valueChange(args) {

    if (args.code === "NumpadDecimal") {

        if (!this.value.includes(window.decimalValue) && window.decimalValue !== ".") {

            this.value =

                this.value.slice(0, this.selectionStart) +

            window.decimalValue +

                this.value.slice(this.selectionStart);

        }

    }

}

[_Host.cshtml]

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap5.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/blazor/20.1.47/syncfusion-blazor.min.js"></script>

    <script src="~/Uploader.js"></script>

Find the sample in the attachment:

Regards,

Sureshkumar P


Attachment: BlazorServerSideLocaliation_37b74feb.zip

FF Frederic FOURGEOT June 30, 2022 02:37 PM UTC

Perfect 

Many thanks


Best regards


SP Sureshkumar P Syncfusion Team July 1, 2022 04:11 AM UTC

Frederic,


Thanks for your update.


Regards,

Sureshkumar P


Loader.
Up arrow icon