Rank 1
Iron
Iron
Hello,
We are using globalization in our application and one of the requirements is showing different values in different ways in our NumericTextbox. Problem is our application is in en-US and we would like it to stay that way except for the numeric where we have multiple requirements for different locales in which all are editable. So there is no way to formatNumber(12312312, 'c2', 'de') for example and for language of the application to remain in some other language.
We would like to specify locale by passing prop and loading the cldr data before hand and format the number as we like and for it to work in view and edit mode like it works now for english, so instead of $1,234.00 we would want in some cells to be 1.234,00 €, also for percentage not to be %1.75 but 1,75% in per case basis. We tried using kendo-intl and not kendo-react-intl for formatting numbers using formatNumber and c, c2, n, n2, p, p2 but then group number separators as well as currency code or percentage symbol is deletable in edit mode.
Hope there is a solution for this and hope to hear from you soon.
Best regards
Hi, Sanja Tolo,
Based on the provided description I understand that you wish to keep the language in en-US but you rely on kendo-intl to change the NumericTextBox comma formatting is that correct?
I tested the NumericTextBox with `c2` format, however, it seems that the currency code is not deleted on my end unless I select the entire input with the currency code included, which is expected:
https://stackblitz.com/edit/react-eff9fk-17v4fx?file=app%2Fmain.tsx
Since this seems like a rather complex implementation and we might miss some details, can you please provide a runnable example that matches your implementation as closely as possible so that we can see if a suitable solution exists for your scenario?
Regards,
Filip
Yes, but in your demo the numeric textbox remains on en-US. Our requirement is that you can pass locale to formatOptions in NumericTextBox so our application and other stuff remains in en-US but numericTextBox could be in like croatian and formatting numbers and editing would be different.
For example:
c2 en-us: 5,000,000.00 $
c2 hr: 5.000.000,00 €
p2 en-us: 1.75 %
p2 hr: 1,75 %
So we need to be able to modify big number grouping separator and decimal separator per numeric texbox field in a form...
Ideally that should be possible by loading cldr data for certain language and adding some locale: 'hr' prop to format: NumberFormatOptions object.
Also ideally edit mode of numeric textbox should have currency symbol and percentage symbol on the right side of the number and not on the left at the start.
It should be noted that it works as expected when i pass 'hr' to IntlProvider from @progress/kendo-react-intl but it changes also the calendars and name of months and it works on a application level which is maybe not the preferred use-case.
Let me know if you still need a runnable example.
Hi Sanja,
For achieving the desired result you can wrap the NumericTextBox in IntlProvider with the locale that you want for that particular component. Here is an example demonstrating such implementation;
Another option is to set the format of the NumericTextBox to an object, but please note that the decimal separator could not be changed:
Thank you for your response. Unfortunately both examples have potential issues. I would need to wrap Intl Provider somewhere and then whenever that screen or something shows up I would always load the data, multiple times, with every render.
Other options as you have stated is not valid because digit and decimal separators rely on locale.
We will keep searching for some kind of solution.
HI Sanja,
You can take a look at the following example as well, where different currency is added within the formatOptions directly: