Grid 列移動の概要

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

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

Note

ヘッダーが再テンプレート化され、対応する列が移動可能 (またはグループ化可能) な場合は、テンプレート要素で draggable 属性を false に設定する必要があり、これにより適用されるイベントをすべて処理できます。

<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

ピン固定領域が最大幅 (Grid 幅合計の 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;
    }
}

スタイル設定

Grid 列移動ヘッダーのスタイル設定は、すべてのテーマ関数とコンポーネント mixins のある index ファイルをインポートする必要があります。

// custom-grid-column-moving-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-grid-theme を拡張して $ghost-header-background$ghost-header-text-color$ghost-header-icon-color パラメーターを受け入れる新しいテーマを作成します。

// Define dark theme for the column moving
$dark-grid-column-moving-theme: igx-grid-theme(
    $ghost-header-text-color: #F4D45C,
    $ghost-header-background: #575757,
    $ghost-header-icon-color: #f4bb5c
);

最後のステップは、それぞれのテーマを持つコンポーネント mixins を含めることです。

@include igx-grid($dark-grid-column-moving-theme);
Note

コンポーネントの View Encapsulation ストラテジに基づいて、::ng-deep を使用してこのカプセル化を penetrate する必要な場合があります。

:host {
    ::ng-deep {
        @include igx-grid($dark-grid-column-moving-theme);
    }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-paletteigx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$yellow-color: #F4D45C;
$black-color: #575757;

$dark-palette: igx-palette($primary: $yellow-color, $secondary: $black-color);

次に igx-color を使用してパレットから簡単に色を取り出すことができます。

$dark-grid-column-moving-theme: igx-grid-theme(
    $palette: $dark-palette,
    $ghost-header-text-color: igx-color($dark-palette, "primary", 400),
    $ghost-header-background: igx-color($dark-palette, "secondary", 200),
    $ghost-header-icon-color:  igx-color($dark-palette, "primary", 500)
);
Note

igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

スキーマの使用

テーマ エンジンを使用して、スキーマの利点を使用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは light-grid の 1 つを拡張します。

// Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
        (
            ghost-header-text-color:(
                igx-color: ("primary", 400)
            ),
            ghost-header-background:(
                igx-color: ("secondary", 200)
            ),
            ghost-header-icon-color:(
                igx-color:( "primary", 500)
            )
        )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネントテーマに追加するものです。

// Extending the global dark-schema
$custom-light-schema: extend($light-schema,(
    igx-grid: $dark-grid-column-moving-schema,
));

// Defining dark-grid-theme with the global dark schema
$dark-grid-column-moving-theme: igx-grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

テーマを上記と同じ方法で含めることに注意してください。

デモ


API リファレンス

その他のリソース

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