IgxGrid テンプレート機能を利用し、エディタを常に表示する

IgxGrid のテンプレート機能を利用し、常にエディタを表示してみます。テンプレート機能は、次の様に igx-column 配下に、ng-template を配置し、igxCell ディレクティブを付与します。そしてその子要素として任意のユーザーコントロールを配置することで実現できます。

app.component.html

<igx-grid #grid1 [data]="localData" [primaryKey]="'id'"
  ...>
  ...
  <igx-column field="productName" header="Product Name">
    <ng-template igxCell let-cell="cell">
      <input type="text" class="editor"
        [value]="cell.value" (change)="updateCell(cell, $event)">
    </ng-template>
  </igx-column>
  ...
</igx-grid>

IgxGrid の通常の編集機能は、グリッドの非編集状態と編集状態を明確に区別して状態保持しております。但し、テンプレート機能を用いて常に編集エディタを表示するとなると、編集操作後にグリッドに対してなされる値変更について、グリッドに明示的に通知する必要が生じます。テンプレート内に配置した input コントロールの change イベントをハンドルし、編集内容をグリッドに通知します。

app.component.ts

updateCell(cell: IgxGridCellComponent, args: Event) {
  const input = args.target as HTMLInputElement;
  cell.update(input.value);
}

“Product Name” 列では、テンプレート内の input コントロールに対して値変更を行っています。”Product Name2″列は、”Product Name” 列と同じ値をバインドしており、エディタからフォーカスが外れた時点でデータの変更が反映されていることが分かります。