RangeError: Maximum call stack size exceeded

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:

• When is this function called? Is it called on a particular Grid event?
• If possible could you share the grid definition and the logic that triggers the related function (totalSum)?
• Which version of the igniteui angular package are you currently using? 

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",

Hello Thomas, 

Thank you for the additional information. 

onCellEdit is an event that is triggered every time a cell is updated (via the API or via the UI). As such calling update() Api (mmRabat.update(1); ) inside it will trigger the onCellEdit event again, creating an infinite loop.

Please make sure you are not updating the same cell inside the onCellEdit event triggered for it. For example:

  public totalSum(t: IGridEditEventArgs) {

const column = this.grid.columnList.find(e => e.index === t.cellID.columnID);

                 if (column.field !==  'mmRabat ') {

const mmRabat = this.grid.getCellByColumn(t.cellID.rowIndex, 'mmRabat');

                mmRabat.update(1);

}

…

 

Let me know if that solves your issue.

 

Regards,

Maya Kirova

I have tried the function that you suggested and I'm still getting an RangeError: Maximum call stack size exceeded exception 

that works but what if I want to update the another cell if I edit the mmRabat column ?

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);
    }  
}

Hello Thomas, 

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.

 

Regards,

Maya Kirova

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

Hello Thomas, 

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? 

I’m looking forward to your reply. 

Regards,

Maya Kirova