グリッドの列移動

Ignite UI for Angular の Grid コンポーネントは、標準ドラッグ/ドロップのマウス ジェスチャで列移動を使用した列の並び替えをサポートします。

固定列の列移動も可能なため、ピン固定していない列をドラッグしてピン固定領域内にドロップして列をピンを固定したり、ピン固定領域内から列をドラッグして非固定領域にドロップしてピン固定の解除ができます。

Note

If a header is retemplated and the corresponding column is movable (or groupable), you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

デモ


概要

列移動は各列レベルで有効にできます。つまり、igx-grid に移動可能な列と移動不可の列の両方を含むことができます。igx-columnmovable 入力によって制御されます。

<igx-column [field]="'Category'" [movable]="true"></igx-column>
Note

ピン固定領域が最大幅 (グリッド幅合計の 80 %)を超えた場合、ドロップ操作が禁止されていてピン固定ができないことをヒントの表示でエンドユーザーに通知します。つまり、ピン固定領域に列をドロップできません。

イベント

列のドラッグアンドドロップ操作をカスタマイズするための列移動に関連するイベントが複数あります。onColumnMovingStartonColumnMovingonColumnMovingEnd があります。 igx-gridonColumnMovingEnd イベントを処理し、列が新しい位置にドロップされたときにカスタム ロジックを実装できます。たとえば、Change On Year(%) 列の後に Category のドロップをキャンセルできます。

<igx-grid #dataGrid [data]="data" [autoGenerate]="false" (onColumnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'" [movable]="true"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" [movable]="true" ></igx-column>
</igx-grid>
public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。