IgxGrid では、列のドラッグ&ドロップによる移動が可能ですが、特定の列は移動できないように制御したいケースもあります。
この記事では、「Name」列を固定し、それ以外の列のみ移動を許可する実装方法を紹介します。

IgxGrid の設定

まず、[moving] を true に設定し、列移動を有効にします。
さらに (columnMovingEnd) イベントをバインドし、移動完了時に処理をフックします。

<igx-grid ....
  [moving]="true"
  (columnMovingEnd)="onColumnMovingEnd($event)"
>
  <igx-column field="name" header="Name" width="35%"></igx-column>
  <igx-column field="country" header="Country" width="35%"></igx-column>
  <igx-column field="age" header="Age" dataType="number" width="30%"></igx-column>
</igx-grid>

列移動制限のロジック

columnMovingEnd イベントの引数 event.source.field を使って、移動対象の列が「name」の場合に列の移動をキャンセルします。

import { IColumnMovingEndEventArgs } from '@infragistics/igniteui-angular';

onColumnMovingEnd(event: IColumnMovingEndEventArgs) {
  if (event.source.field === 'name') {
    event.cancel = true;
  }
}

実行結果

「Country」や「Age」列は自由に移動可能ですが、「Name」列を移動しようとすると、移動がキャンセルされ元の位置に戻ります。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

Tagged:

製品について

Ignite UI for Angular