Cell Value Format

[Peter]

Hi,

I’m trying to format a value (currency amount) in a grid cell. I’m ware that you have a whole formatting api for numbers, but since I’m not familiar with that just yet, I’m trying with a template function.
The function works as intended, but I noticed that the cell padding is lost in the process rendering the value glued to the right edge of the cell.
I’m expecting that if the template is mussing, I need to add something more?

Here is the column configuration:

{
            label: 'Amount', dataField: 'Amount', editor: 'numberInput', width: 200, allowEdit: false,
            template: function (formatObject)
            {
                const data = formatObject.row.data;

                if (!formatObject.template)
                {
                    if (data.Amount != null)
                    {
                        formatObject.template = data.Amount.toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});
                    }
                    else
                    {
                        formatObject.template = (0.00).toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});
                    }
                }
                else
                {
                    if (data.Amount != null)
                    {
                        formatObject.template = data.Amount.toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});
                    }
                    else
                    {
                        formatObject.template = (0.00).toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});
                    }
                }
            }
        }

Should I be doing this with some built-in feature instead?

[Peter]

Also, if this is the way to do this, is there a way to control the actual-value vs the display-value?

Aside from the padding of the cell being lost in my sample above, there are other issues as well:

1) If I use toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2}) the decimal separator becomes a “,” comma when displayed, but a “.” point when in edit mode. I would like it to be a “,” comma in both cases, but the final value when saved should of cause be a “.” point.

2) If I use toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2, useGrouping: true}) in order to show a localized 1000 divider, in this case a “.” point, then it stays in the cell when it is in edit mode, which it should not.

• This reply was modified 1 year, 1 month ago by Peter.

[Peter]

I have also tried using a formatFunction, but the padding of the cell is still lost, making the value glued to the right edge of the cell.

{
            label: 'Amount', dataField: 'Amount', editor: 'numberInput', width: 200, allowEdit: false,
            formatFunction: function (settings)
            {
                if (settings.value != null)
                {
                    const formatedNumber = settings.value.toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});

                    settings.value = formatedNumber;
                }
                else
                {
                    const formatedNumber = (0.00).toLocaleString('da-DK', { maximumFractionDigits: 2, minimumFractionDigits: 2});

                    settings.value = formatedNumber;
                }
            }
        }

[svetoslav_borislavov]

Hi,

You may use the cellsFormat property in the column definition. In the following demo, you can see how it is done:
https://www.htmlelements.com/demos/grid/column-formatting/

If you want to use the formatFunction, you may change the cellsAlign property. It takes the following values: “left” | “right” | “center”

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Peter]

Thank you – where can I find a list of possible values for the cellFormat attribute? – the documentation at this point, doesn’t show it nor does it link to it, which would have been nice.

Also, the alignment is fine (right side since it’s numbers) but the code I used, removed something from the cell (or it’s template) so that the few pixels of padding between the value and the cell wall became 0px, aka the value touches the cell wall instead of having like 3px padding like normal.

[Markov]

Hi,

in the grid api docs page, expand columns and then go to cellsFormat. You will see all possible formats there

regards

markov

[Peter]

Ok, so I can use the ‘f2’ to get a number with 2 decimals.

But can I by configuration make the decimal divider become “,” instead of “.” visually both in and out of edit mode? – or is that driven my the grid’s locale?

And if driven by the locale, where do I set this value (not the locale itself, the divider)? I understand that there is a “messages” object under which the localized texts are, but where exactly is this “messages” object? – I don’t assume its a global var – is it attached to the smart grid object or where is it?

[svetoslav_borislavov]

Hi,

To get familiar with how the localization works, please visit this topic: https://www.htmlelements.com/docs/grid-localization/
Here is a demo of the localization: https://www.htmlelements.com/demos/grid/localization

And this is a demo with the separator changed to ‘.’: https://codepen.io/svetoslavjqwidgets/pen/NWLJyBY

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Peter]

Thank you for that. Now the decimal values show with ‘,’ as decimal divider as expected in the grid, when not in edit mode.
In edit mode however, the decimal divider is still ‘.’.

How about the cell editor of such field – currently it doesn’t show nor allow that the user types ‘,’ as decimal divider (which it is in locale ‘da’), most likely because the column config has editor: numberInput or/and because the data type of the dataField is of type number.

Is there a way to fix this through configuration or would I have the change the dataFieldtype to string in order to allow the user to use ‘,’ as decimal divider when typing in the cell?

• This reply was modified 1 year, 1 month ago by Peter.

[Peter]

Nevermind this – I have now changed the field from number to string … There are way too many problems when using number apparently.
Either there are problems formatting the value in display mode or when in the open editor, or else there are problems (only sometimes though) when trying to type e.g. 300 the editor only allows me to type 30 and then ignores any further zeros being typed.

[Peter]

In response to this (#104637), I can say that the ‘decimalSeparator’ seems to work, but the ‘thousandsSeparator’ is ignored.

[Author]

Posts