IgxGrid 編集可能列をスタイリングする

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

IgxGrid で編集可能列をスタイリングするには、IgxGrid 列（IgxColumn）の cellClasses プロパティにバインドするオブジェクトのコールバックで、列の editable プロパティを条件にスタイリングするかを決定いたします。

<igx-grid #grid1
  ...>
    <igx-column *ngFor="let c of columns"
          [field]="c.field"
          ...
          [cellClasses] = "c.classes ? cellTextClasses : null">
    </igx-column>
</igx-grid>

  cellTextClasses = {
    editable: (rowData, columnKey, cellValue, rowIndex) => {
      return this.grid1.getColumnByName(columnKey).editable ? true : false; // 該当列が編集可能(editable = true)であればスタイリングを実施する
    },
  };

実行結果

編集可能列のみをスタイリングすることができました。

サンプル