Using the custom example was just want I was looking for. However, it is behaving a but odd.

I have 13 rows where only 1 row has CellA = 2 and the rest have CellA = 0.
I’m trying to change the content of CellB based on this value.
So I’m doing the following on CellB column:

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

console.log('data.CellA: ' + data.CellA);

if (data.CellA == 0)
{
formatObject.template = '';
}
else if (data.CellA == 1)
{
formatObject.template = '(font awesome icon X)';
}
else if (data.CellA > 1)
{
formatObject.template = '(font awesome icon Y)';
}
}
}

What I can see in the console is that the console.log line is fired 13 * 13 times.
(‘data.CellA: 2’ 1 time and ‘data.CellA: 0’ 12 times) * 13.

The method that “Smart('#grid', class ... etc. etc.” is called only once though, so what could be going on here?

In the code below “attachment_count” is “CellA”, and “Attachment” is “CellB” in regard to my initial post.

Grid and columns and settings:

var smart_grid_config = {
    dataSource: null,
    appearance: {
        alternationCount: 2,
        showRowHeader: true,
        showRowHeaderSelectIcon: true,
        showRowHeaderFocusIcon: true,
        allowHover: true
    },
    paging: {
        enabled: true,
        pageSize: 30,
        pageIndex: 0
    },
    pager: {
        visible: true
    },
    sorting: {
        enabled: true,
        mode: 'many'
        /*commandKey: 'altKey'*/
    },
    filtering: {
        enabled: true
    },
    editing: {
        enabled: true,
        mode: 'cell',
        addNewRow: {
            autoCreate: true
        }
    },
    selection: {
        enabled: true,
        allowCellSelection: true,
        //allowRowHeaderSelection: true,
        //allowColumnHeaderSelection: true,
        mode: 'extended'
    },
    summaryRow: {
        visible: false,
        editing: true
    },
    behavior: { columnResizeMode: 'growAndShrink' },
    /*keyboardNavigation: true,*/
    columns: [
        {
            label: 'RowId', dataField: 'RowId', width: 0, visible: false
        },
        {
            label: '#', dataField: 'Line_Number', width: 50, freeze: true
        },
        {
            label: 'Template Name', dataField: 'Journal_Template_Name', visible: false
        },
        {
            label: 'Batch Name', dataField: 'Journal_Batch_Name', visible: false
        },
        {
            label: 'Dato', dataField: 'Posting_Date', width: 150, cellsFormat: 'dd-MM-yyyy'
        },
        {
            label: 'Document Type', dataField: 'Document_Type', visible: false
        },
        {
            label: 'Bilagsnr.', dataField: 'Document_No', width: 150
        },
        {
            label: 'Account Type', dataField: 'Account_Type', width: 150, visible: false /*, editor: {
                template: 'autoComplete',
                autoOpen: true,
                dropDownButtonPosition: 'right',
                dataSource: ['Finanskonti', 'Kunder', 'Leverandører']
            } */
        },
        {
            label: 'Konto', dataField: 'Account_No', width: 150
        },
        {
            label: 'Navn', dataField: 'AccountName', allowEdit: false
        },
        {
            label: 'Beskrivelse', dataField: 'Description'
        },
        {
            label: 'Currency', dataField: 'Currency_Code', visible: false
        },
        {
            label: 'Amount', dataField: 'Amount', editor: 'numberInput', visible: false
        },
        {
            label: 'Amount LCY', dataField: 'Amount_LCY', editor: 'numberInput', visible: false
        },
        {
            label: 'GenBusPosGroup', dataField: 'Gen_Bus_Posting_Group', visible: false
        },
        {
            label: 'GenProPosGroup', dataField: 'Gen_Prod_Posting_Group', visible: false
        },
        {
            label: 'VATBusPosGroup', dataField: 'VAT_Bus_Posting_Group', visible: false
        },
        {
            label: 'VATProPosGroup', dataField: 'VAT_Prod_Posting_Group', visible: false
        },
        {
            label: 'Udgift', dataField: 'Debit_Amount', editor: 'numberInput', width:100
        },
        {
            label: 'Indtægt', dataField: 'Credit_Amount', editor: 'numberInput', width:100
        },
        {
            label: 'VAT Amount', dataField: 'VAT_Amount', visible: false
        },
        {
            label: 'BalVAT Amount', dataField: 'Bal_VAT_Amount', editor: 'numberInput', visible: false
        },
        {
            label: 'BalAccount Type', dataField: 'Bal_Account_Type', visible: false
        },
        {
            label: 'Beholdningskonto', dataField: 'Bal_Account_No', width: 150, editor: {
                template: 'autoComplete',
                autoOpen: true,
                dropDownButtonPosition: 'right'
            }
        },
        {
            label: 'BalGenPosType', dataField: 'Bal_Gen_Posting_Type', visible: false
        },
        {
            label: 'On Hold', dataField: 'On_Hold', template: 'checkBox', editor: 'checkBox', visible: false
        },
        {
            label: '', dataField: 'Attachments', cellsVerticalAlign: 'middle', verticalAlign: 'middle', align: 'center', cellsAlign: 'center', width: 80, freeze: 'far', allowEdit: false, 
            template: function (formatObject)
            {
                const data = formatObject.row.data;
                //console.log('data.attachment_count: ' + data.attachment_count);
                if (data.attachment_count < 1)
                {
                    formatObject.template = '';
                }
                else if (data.attachment_count == 1)
                {
                    formatObject.template = init.icons.image.fa_font;
                }
                else
                {
                    formatObject.template = init.icons.images.fa_font;
                }
            }
        },
        {
            label: '', dataField: 'attachment_count', width: 40, allowEdit: false, visible: false
        }
    ],
    onLoad()
    {
        console.log('grid.onLoad');
    }
};

Data fields:

var smart_grid_data_fields = [
    'RowId: string',
    'Line_Number: number',
    'Journal_Template_Name: string',
    'Journal_Batch_Name: string',
    'Posting_Date: date',
    'Document_Type: string',
    'Document_No: string',
    'Account_Type: string',
    'Account_No: string',
    'AccountName: string',
    'Description: string',
    'Currency_Code: string',
    'Amount: number',
    'Amount_LCY: number',
    'Gen_Bus_Posting_Group: string',
    'Gen_Prod_Posting_Group: string',
    'VAT_Bus_Posting_Group: string',
    'VAT_Prod_Posting_Group: string',
    'Debit_Amount: number',
    'Credit_Amount: number',
    'VAT_Amount: number',
    'Bal_VAT_Amount: number',
    'Bal_Account_Type: string',
    'Bal_Account_No: string',
    'Bal_Gen_Posting_Type: string',
    'On_Hold: bool',
    'Attachments: string',
    'attachment_count: number'
];

Grid init:

Smart('#grid', class
            {
                get properties()
                {
                    var config = smart_grid_config;

                    config.dataSource = new Smart.DataAdapter(
                        {
                            dataSource: data_source, // not shown here, but is an array of data rows.
                            dataFields: smart_grid_data_fields
                        });

                    return config;
                }
            });

Also, onLoad in the grid config never seems to fire – at least the line is not written to the console as expected.

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

Hmm if I’m to share an online demo of this it would be behind a login, which I shouldn’t share with everyone here.

There somewhere I can send this information that isn’t on this public forum?

Thank you, it is done.

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.

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.

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.