Numeric input on popup edit on different language

[Dan]

I have a page that contains a grid. The grid contains a number column. The grid is using a custom popup editor. For the number column I am using an input instead of the telerik control for numbers.

The application is localized.

When I am using a culture where the decimal separator is comma(",") when changing the number after leaving the input the decimal separator is changed from comma to point.

 

I have prepared a demo

https://dojo.telerik.com/UvAfafor/2

Here are the steps to reproduce the problem:

1. Edit the 5th row (the one that has decimals 21.35 - anyone that has decimals should work)

2. Change the decimal point from point to comma (The code from gridEdit does not work - even though in my application works[however I am using globalize package])

3. Leave the input (The decimal point should remain to comma)

4. Go to UnitPrice and add at the end a new digit (can be added or removed any digit as long as the comma is not removed)

5. Leave the input => wrong behavior the comma is converted to point.

=> expected behavior the comma should remain regardless of how many times I change the value

[Silviya Stoyanova]

Hello, Dan,

I would suggest using the Kendo NumericTextBox input for your editor.

$('<input data-role="numerictextbox" data-spinners="false" name="UnitPrice" data-bind="value:UnitPrice">').appendTo(container);

As you could see from the Kendo UI Grid documentation it is the underlying editor for models with data type - number. 

The numerictextbox uses the kendo.parseFloat() method, which triggers the change event of the model. After the input gets refreshed its parsed value will be applied according to the used culture.

In addition, behind the scene, numerictextbox uses the kendo culture and determines the specific culture properties.

To disable its default spinner buttons you could set them to false.

https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox/configuration/spinners

Also, keep in mind that Kendo UI for jQuery is no longer supports GlobalizeJS 0.1 library.

I hope this helps.

Kind Regards, Silviya Stoyanova Progress Telerik

[Dan]

Hi Silviya,

 

So I tried to use the numerictextbox like you suggested but the numerictextbox does not work with DisplayFormatAttribute. It seems that setting only the Format on a numerictextbox is not enough. The decimals property needs to be set as well.

And this means that I have to configure for every number in the view the format and the decimals and this is not an acceptable alternative

[Silviya Stoyanova]

Hello Dan,

Because the input is not a Kendo widget I would suggest in your function gridEdit() on change event of the input replacing the dot separator with a comma as well.

function gridEdit(e){               
    var input = e.container.find("input[name='UnitPrice']");
          input.val(e.model.UnitPrice.toString().replace('.', ','));
          input.on('change', function(){
              input.val(input.val().replace('.', ','));
    })
}

 

Kind Regards, Silviya Stoyanova Progress Telerik