NumericTextBoxFor showing incorrect value when using culture pt-BR

[Douglas]

Hi,

Looks like there is some kind of issue when trying to use the .NET Core wrapper for NumericTextBoxFor while using the culture pt-BR.

The values in the text field gets incorrect if the value has a decimal.

For example a double 1234.56 becomes 123,456.00 but the expected result is 1.234,56

This happens when the kendo.culture().numberFormat[","]  is a "." (dot).

Here is an example of the error:
https://netcorerepl.telerik.com/weavadPV01xSQZX716

I can also reproduce the error with Kendo UI jQuery, If the html input tag has an intital value, then it becomes like the example above.
https://dojo.telerik.com/@[e-mail]/ejEhecIV/2
https://dojo.telerik.com/@[e-mail]/ogiVoMAZ/5

Managed in my examples to do a work around until this has been fixed.

[Douglas]

Same issue with PercentTextBox:

https://netcorerepl.telerik.com/moaPOnFL39QghxdF20

 

[Alexander]

Hi Douglas,

I really appreciate the substantial amount of effort you have taken to demonstrate the behavior for the Telerik UI for ASP.NET Core and Kendo UI for jQuery NumericTextBox and PercentTextBox incarnations.

To be frank, you have done a splendid job and I assure you, your efforts are not taken for granted.

Generally, when the Telerik UI for ASP.NET Core suite is utilized different nature of the helper's localization happens.

In the context of HtmlHelper, it utilizes the application's server culture.

Hence, I would also recommend embedding the following layer of logic within the controller that is used for rendering the NumericTextBox and PercentTextBox components:

public class HomeController : Controller
{
    ...
	
    public override void OnActionExecuting(ActionExecutingContext context)
    {
     
        CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("pt-BR");

        base.OnActionExecuting(context);
    }
}

As well as configuring the "Program.cs" or "Startup.cs" hosting models of the application as follows:

var cultures = new List<CultureInfo>() { new CultureInfo("pt-BR") };

app.UseRequestLocalization(new RequestLocalizationOptions
{
    DefaultRequestCulture = new RequestCulture("pt-BR"),
    SupportedCultures = cultures,
    SupportedUICultures = cultures
});

This should then produce the following result within the NumericTextBox:

In terms of the Kendo UI for jQuery NumericTextBox, it is important to notate the input tag with the "type" attribute, so that the value is parsed correctly:

 <div style="margin-bottom:15px;">
     <input id="txtNumeric1" style="width: 100%;" type="number" value="1234.56" />
 </div>

This should then produce the following result:

When it comes to the PercentTextBox, it is important to additionally configure the component for decimal percentiles as follows:

@(Html.Kendo().PercentTextBox()
    .Name("PercentTextBox")
    .Label(l => l.Content("Set value"))
    .Value(0.33)
    .Format("##.00 \\%")
    .Min(0)
    .Step(1)
    .Decimals(2)
    .HtmlAttributes(new { style = "width: 100%" })
)

The aforementioned approach would then produce the following result:

More API configurations are available within the following resource that you might find helpful in this regard:

• Server-Side NumericTextBox API

For your convenience, I am also attaching a runnable sample in which the HtmlHelper component declarations are employed.

Please give these suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Douglas]

Thanks for your answer!

Adding type="number" solved the issue in Kendo UI jQuery! Excellent! 

Here it is and working:
https://dojo.telerik.com/@[e-mail]/ogiVoMAZ/5
https://dojo.telerik.com/@[e-mail]/ejEhecIV/2

I will check your sample for MVC later today or tomorrow.

 

Why doesnt the Kendo UI Core wrappers set the correct attribute to type="number" then?

[Alexander]

Thanks for the heads-up!

To be frank, this is a good question. Upon further researching our existing source code, it appears that the Telerik UI for ASP.NET Core sets the NumericTextBox input's type attribute to "text" so we can style the components without the interference of the default browser styling.

Otherwise, it would oppose different UI limitations which may prove detrimental to the overall user experience. 

I hope this information helps.