CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-asp.net-mvc
Phil
Phil

Reputation: 1973

kendo UI numeric textbox culture not translating correctly

I'm using a numeric textbox on my MVC site that is bound to an object, like:

@Html.Kendo().NumericTextBoxFor(m =>  m.Latitude).Decimals(8).Min(-90).Max(90).Step(.01)

Where the Latitude object is just a property that looks like:

public double? Latitude { get; set; }

my website can be shown in 2 different cultures, both getting it's data from the same database. So the value saved in the database looks like '48.33900606', etc. This all works fine on my en-US website, but on my de-DE website the value doesn't show up at all on edit. If i type in '48,33900606', it works fine and i can save and it saves as a double like it should. If i 'edit', where the numeric textbox loads with that value, it just blanks out. If i click on the box, i can see '4833900606' without commas, without periods, but when i click away it changes to 90,00 (becuase that's my listed maximum above). Anyway to reconcile this?

Upvotes: 1

Views: 1537

Answers (2)

gmakrygiannis
gmakrygiannis

Reputation: 360

Although the question is a bit old, it might work for some guys working with Kendo NumericTextbox on the latest browsers. You need to add the following code in the NumericTextbox declaration to override the type="numeric" attribute:

.HtmlAttributes( new { type="text" } )

I just found out that this happens due to the type attribute of the input values being validated by the browsers in some browser versions (I am getting this on Chrome 56.0.2924.87). This browser setting seems to mess up the values during validation and I get the same issue with the numeric textbox being blank

During the loading of the numerictextbox I get a console warning stating that:

The specified value "5,00" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

Upvotes: 3

davcs86
davcs86

Reputation: 3935

You need to set the culture when you work in de-DE

Add to your page 

 <script src="kendo.culture.de-DE.js"></script>

Set the culture

 kendo.culture("de-DE");

Kendo reference

Tutorial

Update

In that case, I'd suggest to format the number before sending it to the Kendo widget

<input id="txtLatitude" name="Latitude">
<script>
    $("#txtLatitude").kendoNumericTextBox({
        value: kendo.toString(Model.Latitude, "n8", "de-DE"),
        min: -90,
        max: 80,
        step: 0.01,
        decimals: 8
    });
</script>

Upvotes: 0

Related Questions