I have this function on my TS file that should update a value of a cell
public totalSum(t: IGridEditEventArgs) {const column = this.grid.columnList.find(e => e.index === t.cellID.columnID); if (column.header === 'Total') { const rabat: number = Number(t.newValue) / Number(t.oldValue) * 100; const mmRabat = this.grid.getCellByColumn(t.cellID.rowIndex, 'mmRabat'); mmRabat.update(1); // this.grid.updateCell(10, t.cellID.rowIndex, 'mmRabat'); } else {this.updateMMRabat(t); }
But this is the Error I keep getting
MedieplanToolbarComponent.html:81 ERROR RangeError: Maximum call stack size exceeded at Array.filter (<anonymous>) at QueryList.filter (core.js:23826) at IgxGridComponent.get [as rowList] (igniteui-angular.js:64592) at IgxGridAPIService.GridBaseAPIService.get_row_by_index (igniteui-angular.js:2157) at IgxGridAPIService.GridBaseAPIService.get_cell_by_index (igniteui-angular.js:2188) at IgxGridComponent.IgxGridBaseComponent.getCellByColumn (igniteui-angular.js:66439) at MedieplanToolbarComponent.updateMMRabat (medieplan-toolbar.component.ts:344) at MedieplanToolbarComponent.totalSum (medieplan-toolbar.component.ts:338) at Object.eval [as handleEvent] (MedieplanToolbarComponent.html:81) at handleEvent (core.js:29238)
Hello Thomas,
Thank you for posting in our forum.
Could you share some additional information like:
If you happen to have a sample that reproduces the issue please feel free to share it so that we can look into it.
I’m looking forward to your reply.
Regards,
Maya Kirova
Hi Maya
the error is happening when I it tries to update an cell value
mmRabat.update(1); if I out comment the mmRabat.update(v) it does not crash and the action event in the grid is
(onCellEdit)="totalSum()"the version I'm using is "igniteui-angular": "^8.1.4",
Do you have 2 columns bound to the same field (field D)? If not could you explain what you mean by 4 columns – A, B, D and D?
Regarding the first use case: I edit Columns D and update B and D
Do you mean that when the user edits column D you want to change the values for the same column D and another column B or is this a different column D?
okay lets say I have 4 columns A B D and D in the first case I edit Columns D and update B and D next case I edit Column B and update D
Currently the way the code is written will cause an infinite loop since totalPris update will trigger OnCellEdit for mmRabat, which will again trigger update on mmRabat (due to the second if statement), which will trigger the event again.
Could you explain in more details the behavior you are aiming to achieve? For example, when column X is updated via user interactions, then column Y and Z should update their values based on the new user input value.
The code for something like this would look like this:
if (field === 'X') {
const cellY = this.grid.getCellByColumn(t.cellID.rowIndex, 'Y');
const cellZ = this.grid.getCellByColumn(t.cellID.rowIndex, 'Z');
cellY.update(<newValue>);
cellZ.update(<newValue>);
}
Let me know if you are aiming to achieve something similar. If not please explain in more details the desired behavior.
I made this function because I want to be able to edit more that one type of column but If I try to edit the mmRabat
and update the value in the totalPris column I get a cirular reference. I need to be able to edit more that one type of column
public totalSum(t: IGridEditEventArgs) { const column = this.grid.columnList.find(e => e.index === t.cellID.columnID); const field = column.field if (field !== 'mmRabat') { const mmRabat = this.grid.getCellByColumn(t.cellID.rowIndex, 'mmRabat'); const procent = (t.oldValue / Number(t.newValue).valueOf()) * 100; mmRabat.update(procent); this.grid.reflow(); } if (field !== 'totalPris') { const mmRabat = this.grid.getCellByColumn(t.cellID.rowIndex, 'totalPris'); const procent = (t.oldValue / Number(t.newValue).valueOf()) * 100; mmRabat.update(procent); } }
that works but what if I want to update the another cell if I edit the mmRabat column ?