Tree Grid の列の並べ替えと移動

Ignite UI for Angular の Tree Grid のコンポーネントは、標準ドラッグ/ドロップのマウス/タッチによるジェスチャ、または列移動 API を使用した順序変更のための列移動機能を提供します。列の移動は、固定列と固定されていない列、および複数列ヘッダーの両方で機能します。列を固定領域に移動すると列が固定され、または逆に固定領域の外に列を移動すると、列の固定が解除されます。

Note

列と列グループ間の順序変更は、それらが階層の同じレベルにあり、両方が同じグループにある場合にのみ許可されます。列/列グループが最上位の列である場合、列/列グループ間を移動できます。

Note

列ヘッダーがテンプレート化され、対応する列が移動可能 (またはグループ化可能) である場合、テンプレート化された要素は draggable 属性を false に設定する必要があります。これにより、要素によって発行されたすべてのイベントのハンドラーをアタッチできます。それ以外の場合、イベントは igxDrag ディレクティブによって消費されます。

Note

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

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

Angular Tree Grid 列移動の例

概要

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

<igx-tree-grid [moving]="true"></igx-tree-grid>

API

ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 2 つの API メソッドも用意されています。

moveColumn - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター position (DropPosition 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。

// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

move - 列を指定された表示インデックスに移動します。渡されたインデックス パラメーターが無効である場合 (負である/列数を超える場合)、または列がこのインデックスに移動できない場合 (別のグループ内にある場合)、操作は実行されません。

// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

API を使用する時、操作が成功した場合、columnMovingEnd イベントのみが発行されることに注意してください。また、ドラッグアンドドロップ機能と比較して、API を使用するために moving プロパティを true に設定する必要がないことにも注意してください。

イベント

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

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Name'" dataType="string" width="250px"></igx-column>
    <igx-column [field]="'Title'" dataType="string" width="250px"></igx-column>
</igx-tree-grid>

public onColumnMovingEnd(event) {
    if (event.source.field === "Name" && event.target.field === "Title") {
        event.cancel = true;
    }
}

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、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: grid-theme(
    $ghost-header-text-color: #F4D45C,
    $ghost-header-background: #575757,
    $ghost-header-icon-color: #f4bb5c
);

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

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

Note

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

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

カラーパレットの定義

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

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

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

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

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

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

Note

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

スキーマの使用

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

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

// Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
        (
            ghost-header-text-color:(
               color: ("primary", 400)
            ),
            ghost-header-background:(
               color: ("secondary", 200)
            ),
            ghost-header-icon-color:(
               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: grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

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

デモ

Note

このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。

API リファレンス

• IgxColumnComponent
• IgxTreeGridComponent
• IgxTreeGridComponent スタイル

その他のリソース

• Tree Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択
• 検索

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)