Gendo grid custom cell currency format

[Matej]

Hi,

Is it possible to add custom format setting to GridColumn format prop {0:format}? https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-format I need 'en' currency symbol with 'de' number separators e.g. $ 3.400,5

[Vasil]

Hi Matej,

There are several possible solutions to your question. So let me at first give some insists of how it actually works:

The Grid itself does not format the data. The `format` property of the columns with addition to the value for the given cell is passed to the IntlService which format it based on the available formats and the current culture. You may see some more information about our IntlProvider here: https://www.telerik.com/kendo-react-ui/components/intl/i18n/

So the possible solutions:

1) Create your own currencies.json that to be loaded by the IntlProvider, rather than directly using the provided in CLDR data. This solution will work for all of your columns, and for other things in your page outside the grid. This does not scale much if you need lot of combinations between cultures and currencies.

2) Create custom cell for the grid and format the value manual, This can work with or without the Intl service, so there are two options here. This will give you the ability to later switch fr, de,  or other cultures, and remain the $ symbol, If you plan to localize your app for different end users later on.

3) Using custom cells for the grid, you can return the cell by wrapping it into another IntlProvider.

4) Extend the IntlProvider itself, to support new and custom formats, and then use this format for each of your columns. Here is an example of this: https://stackblitz.com/edit/grid-intl-html-encode?file=app%2Fmain.jsx The example is generic, for html encoding, the same approach can be used for just formatting numbers.

5) Format the data before passing it to the grid, and use this as text column. This will scale if you want to later show the same data outside the grid as well.

6) Format the data into extended field, and use custom cell for each column, that uses the extended field. This can be used in combination with 1-4 solutions above.

 

I am aware the above is more informative than straight forward solution, but to be sure your app scale better in long term I would request more information in order to provide you sample that best matches your requirements. Answering the following questions can help us build such for you:

1. Do you show multiple columns in different currencies.

2. Do you show multiple columns in the same currency with different cultural formats?

3. Do you plan to use similar format outside the grid, in other places of your app?

4. Do the end-users of your app have the ability to switch dynamically cultures?

5. Do you have column with different currencies or different formats in per record, for example if data(row) have metadata about the currency the row have or it is global for the entire column or even app?

 

Looking forward for your reply.

Regards,
Vasil
Progress Telerik

[Matej]

Thank you for the explanation.

Here are the answers:

1. Do you show multiple columns in different currencies.
- No

2. Do you show multiple columns in the same currency with different cultural formats?
- No

3. Do you plan to use similar format outside the grid, in other places of your app?
- Yes

4. Do the end-users of your app have the ability to switch dynamically cultures?
- User can change cultures on a separate settings page.

5. Do you have column with different currencies or different formats in per record, for example if data(row) have metadata about the currency the row have or it is global for the entire column or even app?

- Yes, I have both $ and € rows in a single column but they should have the same decimal separator format

[Stefan]

Hello, Matej,

Thank you for all of the information.

Based on that I think that having a custom cell for the Grid is the best approach.

This will allow formatting the currently using the intl provider to have the correct decimal separator and then the currency symbol can be added as a string after that.

Also, a function can be used that returns this string combination inside the cell and also outside of the Grid.

If there is any issue with this approach, please let me know and I will be happy to assist further.

Regards,
Stefan
Progress Telerik

[Matej]

I tried to to it with custom cell and formatNumber() and it looks like it is working

provideIntlService(this).formatNumber(
  1234.5678,
  {
    style: "currency",
    currency: "EUR",
  }
)

something similar to this example https://stackblitz.com/edit/react-en5xaz

 

I have another question. Here is example with formatNumber https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md

import { formatNumber } from '@telerik/kendo-intl';

formatNumber(1234.5678, {
    style: "currency",
    currency: "EUR",
    currencyDisplay: "displayName"
}, "bg"); // 1 234,57 евро

From where is this "bg" culture coming? Is possible to use formatNumber without provideIntlService, registerForIntl and IntlProvider ?

 

 

[Stefan]

Hello, Matej,

Yes, formatNumber can be used without the IntlProvider, provideIntlService, etc. It requires the culture files to be loaded from CLDR using the load method.

The "bg" culture is coming from the "CLDR Data" and has to be loaded as well.

Still, we recommend using the "rovideIntlService(this).formatNumber" as it is already connected to the IntlProvider and will automatically format the number based on the locale loaded there.

The "formatNumber" can be used when you can to format a value in a format different from the current one, like the case you have mentioned for the two values in one cell.

Regards,
Stefan
Progress Telerik

[Matej]

I added a formatNumber() function outside of the IntlProvider to my previous example where all locals are loaded and I still get an error "NoLocale: Missing locale info for 'bg-BG' "

formatNumber(1234.5678, "c2", "bg-BG"

https://stackblitz.com/edit/react-en5xaz

[Stefan]

Hello, Matej,

The formatNumber from the intl package also requires a load method for the formats.

There should be two load methods on the page in order to use two different formats.

I have updated the example:

https://stackblitz.com/edit/react-en5xaz-khw4ke?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Matej]

Thank you!