この KB は 製品バージョン 8.2.7 をベースにしています。

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

例えば、行IDが”ABC”という値の場合のみ編集不可にする場合は、以下のようなコードになります。

<igx-grid #grid1 id="grid1" [data]="data1" [autoGenerate]="false" [primaryKey]="'ID'"
  (onCellEditEnter)="editStart($event)">
  <igx-column [field]="'ID'" [header]="'ID'"></igx-column>

  <!-- 列のeditableはtrueにしておく -->
  <igx-column [field]="'CompanyName'" [header]="'Company Name'" [editable]="true"></igx-column>
  <igx-column [field]="'ContactName'" [header]="'Contact Name'" [editable]="true"></igx-column>

  ...
</igx-grid>
  public editStart(event: IGridEditEventArgs){
    // 行IDが特定の値と合致するか判定し、合致する場合はevent.cancelにtrueを入れてキャンセルする。
    if(event.cellID.rowID == "ABC"){
      event.cancel = true;
    }
  }

 

リファレンス

Tagged: