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, 7 months ago by svetoslav_borislavov.
-
AuthorPosts
-
March 13, 2023 at 2:03 pm #104506PeterParticipant
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?
March 14, 2023 at 5:06 am #104507svetoslav_borislavovParticipantHi,
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 #104509PeterParticipantUsing 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 #104516ivanpeevskiParticipantHi 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 #104521PeterParticipantIn 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.
March 16, 2023 at 6:30 am #104523svetoslav_borislavovParticipantHi,
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 #104526PeterParticipantHmm 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_borislavovParticipantHi,
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 #104542PeterParticipantThank you, it is done.
March 17, 2023 at 8:58 am #104544svetoslav_borislavovParticipantHi,
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 #104554PeterParticipantStill 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, 7 months ago by Peter.
March 20, 2023 at 4:57 am #104570svetoslav_borislavovParticipantHi,
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 #104572PeterParticipantYes, 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_borislavovParticipantHi,
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 #104579PeterParticipantOh, 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. -
AuthorPosts
- You must be logged in to reply to this topic.