Hello Michael,

After investigating this further, I determined that addRowCell template is not applied to the Data Type column because another template is added to this column.

Additionally, what I could suggest is checking if the value of the cell component is undefined and if there is a template applied to the cell and setting the cell value to the column field.

public beginAddRow() {

    this.grid1.beginAddRowByIndex(2);

    this.grid1.getRowByIndex(2).cells.forEach((cell) => {

      if (cell.column.bodyTemplate && !cell.value) {

        cell.value = cell.column.field;

      }

    });

  }

Furthermore, in a method bound to the rowEditExit event the value of the cell would be set back to undefined if the value equals the filed name.

public rowEditExit(evt) {

    if (evt.isAddRow && evt.newValue?.OrderDate === 'OrderDate') {

      evt.newValue.OrderDate = undefined;

    }

  }

I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

@Pipe({ name: 'modifyCell' })
export class ModifyCell implements PipeTransform {
  transform(cell: any): any {
    var value = cell.value;
    if (
      (Array.from(cell.grid.dataRowList)[cell.row.index] as any)?.addRowUI &&
      (cell.value === undefined || cell.value === null)    ) {
      value = cell.column.dataType.toString();
    }

    return value;
  }
}

A sample that demonstrates this approach could be found here.

2. In order to achieve your requirement entirely through the markup what I could suggest is to compare the length of grid's allRows() collection which will return all rows + the curenty added and the grid's data where the row would not be included before adding it:

 <ng-template igxCell let-val let-cell="cell">
          <div            *ngIf="
              cell.grid.allRows().length > cell.grid.data.length &&
                (cell.value === undefined || cell.value === null);
              else cellTmp            "          >
            {{ cell.column.dataType.toString() }}
          </div>
          <ng-template #cellTmp>
            <div>
              {{ val }}
            </div>
          </ng-template>
        </ng-template>

A sample that demonstrates this approach could be found here.

Please keep in mind that both suggestions are workarounds and they are not fully tested, so it is possible to have some side effects depending on your scenario.

Having this in mind, what I could suggest in order to include such functionality out of the box is to submit a new feature request in our GitHub repository here.  Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.

Let me know if I may be of any further assistance.

Sincerely,

Teodosia Hristodorova

Associate Software Developer