We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Numeric Textbox with backing Property of type double

Hello,

I'm having difficulty with the SfNumericTextbox (Numeric Text sounds funny :-) ) in a Blazor Server App.

I would like to bind a double? and I'm currently using Italian culture, but the system should be unaware of that.

When I input "12" and then tab out of the control I have the following warning in the DevTool's Console and I lose the value.

If I try to input something with a dot (comma), I get the following error:


The version I'm using is: 20.4.0.41


Could you please give me any ideas how should I fix that?


Thank you in advance,

Ivan







7 Replies

SP Sureshkumar P Syncfusion Team January 4, 2023 12:14 PM UTC

Hi Ivan,

Based on your shared error, we cannot replicate the reported issue on our end with Italian culture.

Find the validated sample in the attachment:

If you are still experiencing the issue, please try to replicate it using the sample and let us know the steps you took so we can better understand and address the issue.

Regards,

Sureshkumar P


Attachment: NumericLocale_597004e6.zip


IT Ivan Temelkov replied to Sureshkumar P January 4, 2023 01:19 PM UTC

Hi!

Thank you for your reply!

In order to reproduce my issue please add the following to your code.

NumericTextBoxFeatures.razor

...
<SfNumericTextBox TValue="double?" Value=10 HtmlAttributes="@NumericInputAttributes"></SfNumericTextBox>
...
...
@code {
       public Dictionary<string, object> NumericInputAttributes { get; } = new()
        {
            { "type", "number" }
        };
}

Since it is a Numeric TextBox, I certainly would like to have a numeric keyboard on my mobile device.

Strangely, the numeric keyboard is not the default option for Syncfusion's Numeric TextBox, but a lengthy code is required to enable it.

The thing is that this breaks the control in case of backing field ot type double.

Any suggestions?

Best regards,

Ivan



SP Sureshkumar P Syncfusion Team January 9, 2023 04:18 AM UTC

Ivan,We have checked your requirement for displaying a numeric keyboard. To achieve your requirement, we suggest you use type as tel with the help of HtmlAttributes.
 
<SfNumericTextBox TValue="double?" HtmlAttributes="@attr"></SfNumericTextBox> 
@code { 
    public Dictionary<string, object> attr = new Dictionary<string, object>() { 
          { "type""tel" } 
    }; 
} 




IT Ivan Temelkov replied to Sureshkumar P January 10, 2023 11:34 AM UTC

Hi,

using attribute "type" with value "tel" is not only semantically incorrect, but also shows a different set of keys, more appropriate for inputting a phone numbers (without surprise).

I did some research and I found out that the attribute "type" is used to enforce some input validation. The correct attribute to hint the browser what keyboard should be displayed would be "inputmode" (not supported in old browsers): 

Everything You Ever Wanted to Know About inputmode

Still it provides different result on different devices and browsers, but in my case using "inputmode" with value "decimal" is good enough.

Best regards,

Ivan



SS Shereen Shajahan Syncfusion Team January 11, 2023 01:01 PM UTC

Ivan, Glad to know your issue has been resolved. Please get back to us in the future.



IT Ivan Temelkov January 11, 2023 02:07 PM UTC

Well,

if by resolved you mean that I decided not to use Syncfusion's NumericTextbox because it doesn't provide valid defaults for mobile devices, yes it is resolved.

I'm just not happy with the fact that I lost time to troubleshoot a component that my company paid for to find myself  developing it from scratch.





SP Sureshkumar P Syncfusion Team January 12, 2023 08:20 AM UTC

Ivan, we have provided support for HtmlAttributes properties to add the attributes of the component so we cannot give any specific attribute support to the component. which is the reason we suggest you use the “type=tel” attribute to achieve your requirement. If your requirement is different, you can change the attribute value based on your requirement to achieve your requirement by using the HtmlAttributes property.


Loader.
Live Chat Icon For mobile
Up arrow icon