この 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;
}
}
