How do I programmatically update values during row editing in igx-grid?

Question

I am using Angular 11 and current Ignite UI Agnular.

I have a grid which has columns users can edit (name, active, type, etc.) and other columns which they cannot (parameters changed in other screens, audit columns, etc.):

<igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowEditable]="true">
    <igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
    <igx-column field="UpdatedBy" [dataType]="'string'" [editable]="false"></igx-column>
    <igx-column field="UpdatedDate" [dataType]="'date'" [editable]="false"></igx-column>
  </igx-grid>

I want to know how to programmatically modify the "UpdatedBy" and "UpdatedDate" columns when row editing is finished?

Answer 1

The rowEditDone event of the IgxGridComponent can be handled to manually change the targeted properties' values of the current row object:

public rowEditDoneHandler(args: IGridEditDoneEventArgs) {
      const currRowIndex = this.data.indexOf(args.rowData);
      this.data[currRowIndex].UpdatedBy = this.username || 'Anonymous';
      this.data[currRowIndex].UpdatedDate = new Date();
      this.data = [...this.data];
}

Here is also a StackBlitz sample demonstrating this approach.