IgxGrid 行編集で、特定の行の編集を不可にしたい

Ignite UI for Angular 9.1.6 バージョン時点での情報に基づいています。

特定の行のみ編集不可にしたい場合は、 全体としては編集可能にしておき、IgxGridComponentのonCellEditEnterで編集不可にする条件に合致するか判定し、その結果をもとにイベントをキャンセルします。

例えば、「Active」列の値がfalseの時に編集不可としたい場合は、以下のようになります。

<!-- app.component.html -->
<igx-grid #grid1 [data]="data" height="400px" width="100%" autoGenerate="true"
  [primaryKey]="'ID'" [rowEditable]="true"
  (onCellEditEnter)="cellEditStart($event)">
</igx-grid>

// app.component.ts
cellEditStart(event: IGridEditEventArgs){
  // 行IDが一致するデータを取り出す
  let rowData = this.data.find((r) => r.ID === event.rowID);
  // 見つかったら
  if(rowData !== undefined){
    // Active列の値がfalseの場合は、イベントをキャンセルする。
    if(!rowData.Active){
      event.cancel = true;
      return;
    }
  }
}

　

サンプル

　

リファレンス

• onCellEditEnter
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/8.2.7/typescript/classes/igxgridcomponent.html#oncelleditenter