Change cell value based on other cell value

[Peter]

Hi,

I’m trying to figure out how to change the value of a cell to an icon (font awesome in this case) based on the value in another invisible cell, right after data is loaded into the grid – preferable before it is displayed if possible.

Like if cell A contains the number > 0, I would like to insert an icon into cell B – for all rows.

What would be the easiest or best practice way to go about this?

[svetoslav_borislavov]

Hi,

You may check our demo with the dynamic column template:
https://www.htmlelements.com/demos/grid/column-dynamic-template/

Here is a custom one for your needs: https://codepen.io/svetoslavjqwidgets/pen/xxaWgRE
You should set a template in the column definition.
It should be a function that accepts formatObject.
You can use the format object to access the row data.

Best Regards,
Svetoslav Borislavov

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

[Peter]

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?

[ivanpeevski]

Hi Peter,

 

Can you please share the rest of the grid’s settings?

This issue doesn’t appear in the codepen my colleague sent you.

 

Best Regards,
Ivan Peevski

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

[Peter]

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

[svetoslav_borislavov]

Hi,

As you can see with your code,  the described behaviour is not present.
https://codepen.io/svetoslavjqwidgets/pen/xxaWgRE

Can you please share a demo with the problem?

Best Regards,
Svetoslav Borislavov

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

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

[svetoslav_borislavov]

Hi,

You may send it here: support@jqwidgets.com

Best Regards,
Svetoslav Borislavov

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

[Peter]

Thank you, it is done.

[svetoslav_borislavov]

Hi,

Smart.Grid rerenders itself when needed and upon many events. This is the default behaviour and it is not problematic. You are maybe triggering the rerender of it with some non-grid-related code. You may see that even if you open your dropdown in a smaller viewport, the grid will trigger a rerender.
I can see that in your grid_init function, you are invoking the ‘ajaxProgressStop’ method, which may cause this rerender if the method has something to do with the DOM.

Best Regards,
Svetoslav Borislavov

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

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

[svetoslav_borislavov]

Hi,

The previously described behaviour is not a problematic one, rerendering the grid is a common thing.
You shouldn’t worry about it! I suggest you leave the template property from before.

Best Regards,
Svetoslav Borislavov

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

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

[svetoslav_borislavov]

Hi,

You may invoke the ‘render()’ method and the problem will be resolved
Here is an example: https://codepen.io/svetoslavjqwidgets/pen/MWqqpKR

Best Regards,
Svetoslav Borislavov

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

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

[Author]

Posts