JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Change cell value based on other cell value

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #104506
    Peter
    Participant

    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?

    #104507

    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/

    #104509
    Peter
    Participant

    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?

    #104516
    ivanpeevski
    Participant

    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/

    #104521
    Peter
    Participant

    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, 3 months ago by Peter.
    #104523

    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/

    #104526
    Peter
    Participant

    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?

    #104535

    Hi,

    You may send it here: support@jqwidgets.com

    Best Regards,
    Svetoslav Borislavov

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

    #104542
    Peter
    Participant

    Thank you, it is done.

    #104544

    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/

    #104554
    Peter
    Participant

    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, 3 months ago by Peter.
    #104570

    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/

    #104572
    Peter
    Participant

    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.

    #104578

    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/

    #104579
    Peter
    Participant

    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.

Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.