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
