JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Change cell value based on other cell value
Tagged: grid-cell onLoad
- This topic has 28 replies, 3 voices, and was last updated 1 year, 5 months ago by
svetoslav_borislavov.
-
AuthorPosts
-
March 13, 2023 at 2:03 pm #104506
Peter
ParticipantHi,
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?
March 14, 2023 at 5:06 am #104507svetoslav_borislavov
ParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/March 14, 2023 at 11:18 am #104509Peter
ParticipantUsing 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?March 14, 2023 at 9:48 pm #104516ivanpeevski
ParticipantHi 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 PeevskiSmart UI Team
https://www.htmlelements.com/March 15, 2023 at 10:03 am #104521Peter
ParticipantIn 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, 5 months ago by
Peter.
March 16, 2023 at 6:30 am #104523svetoslav_borislavov
ParticipantHi,
As you can see with your code, the described behaviour is not present.
https://codepen.io/svetoslavjqwidgets/pen/xxaWgRECan you please share a demo with the problem?
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/March 16, 2023 at 10:50 am #104526Peter
ParticipantHmm 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?
March 17, 2023 at 4:43 am #104535svetoslav_borislavov
ParticipantHi,
You may send it here: support@jqwidgets.com
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/March 17, 2023 at 8:04 am #104542Peter
ParticipantThank you, it is done.
March 17, 2023 at 8:58 am #104544svetoslav_borislavov
ParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/March 17, 2023 at 12:51 pm #104554Peter
ParticipantStill 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, 5 months ago by
Peter.
March 20, 2023 at 4:57 am #104570svetoslav_borislavov
ParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/March 20, 2023 at 7:04 am #104572Peter
ParticipantYes, 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.March 20, 2023 at 8:30 am #104578svetoslav_borislavov
ParticipantHi,
You may invoke the ‘render()’ method and the problem will be resolved
Here is an example: https://codepen.io/svetoslavjqwidgets/pen/MWqqpKRBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/March 20, 2023 at 8:36 am #104579Peter
ParticipantOh, I thought that was what the
grid.refresh()
method was for – What does that one do then?
If i put ingrid.render()
aftergrid.refresh()
in the code posted above, then no icons are displayed at all. -
This reply was modified 1 year, 5 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.