IgrGrid bodyTemplate is not displayed properly on cell/row edit when values come from other cells

[RivaIvanova]

Description

If the bodyTemplate uses the cell.value inside the template to determine what content to render when the cell.value is updated on edit, the template is updated too.

<IgrColumn
  field="active"
  dataType="boolean"
  bodyTemplate={cellValueBodyTemplate}
></IgrColumn>

const cellValueBodyTemplate = (ctx: IgrCellTemplateContext) => {
  const value = ctx.cell.value;
  return (
    <>
      {value && (
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" />
      )}
      {!value && (
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" />
      )}
    </>
  );
};

But if the value of another cell is used to determine what content to be rendered, the template is not updated when the other cell's value is changed on edit.

const rowDataBodyTemplate = (ctx: IgrCellTemplateContext) => {
  const value = ctx.cell.row.data.active;
  return (
    <>
      {value && (
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" />
      )}
      {!value && (
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png"  />
      )}
    </>
  );
};

<IgrColumn
  field="warehouseId"
  dataType="number"
  bodyTemplate={rowDataBodyTemplate}
></IgrColumn>
<IgrColumn
  field="active"
  dataType="boolean"
></IgrColumn>

IgrGrid - column bodyTemplate.zip

Maybe related to #115

Steps to reproduce

1. Run the attached sample.
2. Change any value in the "active" column.

Result

The template for the "active" column cell is updated, but the one for the "warehouseId" remains the same, even though its content depends on the value of the "active" column cell.

Expected result

Both templates should update similarly to the Angular grid.

Attachments

React Grid:

Angular Grid:

[RivaIvanova]

Angular template for comparison

<igx-grid
  #grid
  [data]="data2"
  width="800px"
  height="300px"
  [primaryKey]="'id'"
  [rowEditable]="true"
>
  <igx-column field="id" [dataType]="'number'"></igx-column>
  <igx-column field="warehouseId" [dataType]="'number'" [cellTemplate]="rowDataBodyTemplate"></igx-column>
  <igx-column field="productName" [dataType]="'string'"></igx-column>
  <igx-column field="quantity" [dataType]="'number'"> </igx-column>
  <igx-column field="active" [dataType]="'boolean'" [cellTemplate]="cellValueBodyTemplate"> </igx-column>
</igx-grid>

<ng-template #rowDataBodyTemplate igxCell let-cell="cell" let-value>
  @if (cell.row.data.active) {
      <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" />
  } @else {
      <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" />
  }
</ng-template>

<ng-template #cellValueBodyTemplate igxCell let-cell="cell" let-value>
  @if (cell.value) {
      <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" />
  } @else {
      <img src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" />
  }
</ng-template>