Products

[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, 7 months ago by Peter.

[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?

[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.

[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;
                }
            }
        }

[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, 8 months ago by Peter.

[Peter]

Hmm now it’s working it seems – I guess I need to take another close look at what I was doing, because I really couldn’t see why that code should produce a different result.

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

[Peter]

There is something I’m missing I think. I have now added what I see to be redundant code lines to make it look like the sample, but it still doesn’t work.

Isn’t the idea to do the following:

Check if there is a template (a div) and if there isn’t one, then add it and set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.
Or if there is one, just set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.

This not understood correctly?

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

[Peter]

I’m only setting an empty div if there is no template object, just like your online demo showed.

The conditions are checked just after this to determine what the content (innerHTML) of the div should be if any.

There are no occasion where the conditions are not checked. In all and any case, the innerHTML is being set to either: ”, ‘<some fa icon A>’ or ‘<some fa icon B>’.

The lines:

if (!formatObject.template)
{
    formatObject.template = '<div></div>';
}

Are not part of the conditions checks, they are standalone before any conditions are checked.

As far as I can tell, the code does the exact same thing, with half the lines of code more or less, or am I missing something?

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

[Peter]

Yes. This almost “works” – but the cells that should have icons from the start, don’t show their icon until I either scroll the grid, change window size or change the value of a cell – or similar change – then the icon appear right away as were they always there.

{
label: '', dataField: 'Attachments', cellsVerticalAlign: 'middle', cellsAlign: 'center', width: 50, freeze: 'far',
allowEdit: false, template: function (formatObject)
{
const data = formatObject.row.data;

if (!formatObject.template)
{
formatObject.template = '<div></div>';
}

if (data.attachment_count != null)
{
if (data.attachment_count < 1)
{
formatObject.template.innerHTML = '';
}
else if (data.attachment_count == 1)
{
formatObject.template.innerHTML = '<some fa icon A>';
}
else if (data.attachment_count > 1)
{
formatObject.template.innerHTML = '<some fa icon B>';
}
}
else
{
formatObject.template.innerHTML = '';
}
}
}

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

[Peter]

Thank you! that fixed that issue.

Then I have another grid where I’m trying to do the same (example from earlier) where the value to act on is either 0, 1 or > 1.

The issue here though is, that at first when the grid is loaded the icons don’t show – but when any cell value is changed or even the grid is scrolled, all the icons appear, as if the column with the icons isn’t rendered initially.

I even tried calling grid.render(); but it doesn’t help. The grid is loaded the same way at the previous described one.

Actually, since all cells in the previous grid starts with ImageAvailable == false, the issue might be the same here – I wounld’t know because showing no icon is the default in this grid.

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

[Peter]

I’m still having difficulties making this work.

If I use the approach with creating a template (if it doesn’t exist) with DIVs and then setting textContent, then I get the font-awesome icon markup (<i>…</i>) as text in the field, which is not the desired result.

If I use empty string ” as template (if no icon should be shown) and font-awesome icon markup if a icon should be shown, then it works the first time at least, going from no icon to an icon.
But when the value is changed so there should be no icon again, then it doesn’t work – the icon stays.

In the sample below ImageAvailable == false should show no icon in File, while ImageAvailable == true should show an icon in File.
So what I’m trying to switch between is either ” or ‘<i class=”some-font-awesome-font”></i>’.

`{
label: ”, dataField: ‘File’, cellsVerticalAlign: ‘middle’, verticalAlign: ‘middle’, align: ‘center’, cellsAlign: ‘center’, width: 120, freeze: ‘far’,
allowEdit: false, template: function (formatObject)
{
const data = formatObject.row.data;

console.log(‘data.ImageAvailable: ‘ + data.ImageAvailable);

if (!formatObject.template)
{
console.log(‘formatObject.template == null’);
formatObject.template = ”;
}

if (data.ImageAvailable == false)
{
formatObject.template = ”;
}
else if (data.ImageAvailable == true)
{
formatObject.template = ‘<i class=”some-font-awesome-icon”></i>’;
}
}
},
{
label: ”, dataField: ‘ImageAvailable’, width: 70, allowEdit: true, visible: true
}`

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

[Peter]

I will try to do the same thing, as it does what I need.

About the multiple renderings, I’ll have to see if the poses an actual problem once I get some real data into the grid.

[Peter]

Oh, I thought that was what the grid.refresh() method was for – What does that one do then?
If i put in grid.render() after grid.refresh() in the code posted above, then no icons are displayed at all.

[Peter]

Yes, that may be, but the issue I describe here is not that about the multiple renderings – it is about that when I change a cell value which should result in an icon changing from something to something else (< 1 , = 1 or > 1), this does not happen.
If the template was previous showing the icon for > 1 then when the value changes to = 1 then the icon doesn’t change, which it should, or at least that is what I’m trying to accomplish here.

[Peter]

Still haven’t found out why this happens, but in attempt to try and update the cell template in some other way, a new question emerged.

I have this function that I call instead (to set the cell template), when the grid has been loaded (called with no arguments).

If I delete an attachment, which means that the dataField ‘attachment_count’ for the given row, should be decreased by 1, I call the same function but this time with the row-number and an update-value (-1 in this case).

However, se template is used for the initial grid load, but when I called the function later on, nothing happens to the cell templates.

function refresh_grid_attachment_icons(row, count_update)
        {
            if (row != null && row != undefined && count_update != null && count_update != undefined)
            {
                const current_count = parseInt(grid.getCellValue(row, 'attachment_count'));
                const new_count = (current_count + count_update);

                console.log('current_count: '+ current_count +' | new_count: '+ new_count); // after an attachment delete, this line shows e.g. "current_count: 1 | new_count: 0".

                grid.setCellValue(row, 'attachment_count', new_count); // and so sets the value of the cell to 0. (it is a number field).
            }

            var col_index_attachments = -1;

            for (var i = 0; i < grid.rows.length; i++)
            {
                if (col_index_attachments < 0 || col_index_attachment_count < 0)
                {
                    for (var x = 0; x < grid.rows[i].cells.length; x++)
                    {
                        if (grid.rows[i].cells[x].column.dataField == 'Attachments')
                        {
                            col_index_attachments = x;

                            break;
                        }
                    }
                }

                if (parseInt(grid.getCellValue(i, 'attachment_count'), 10) < 1)
                {
                    grid.rows[i].cells[col_index_attachments].setProperties({ template: '' });
                }
                else if (parseInt(grid.getCellValue(i, 'attachment_count'), 10) == 1)
                {
                    grid.rows[i].cells[col_index_attachments].setProperties({ template: '<some_fa_icon>' });
                }
                else if (parseInt(grid.getCellValue(i, 'attachment_count'), 10) > 1)
                {
                    grid.rows[i].cells[col_index_attachments].setProperties({ template: '<some_other_fa_icon>' });
                }
            }

            grid.refresh();
        }

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

[Author]

Posts