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

    Web Components Hierarchical Grid の Ignite UI for Web Components 列移動機能を使用すると、列をすばやく簡単に並べ替えることができます。これは、列移動 API を使用するか、マウスまたはタッチ ジェスチャを使用してヘッダーを別の位置にドラッグ アンド ドロップすることによって実行できます。Web Components Hierarchical Grid では、ピン固定された列とピン固定されていない列、および複数列ヘッダーに対しても列の移動を有効にすることができます。

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

    列ヘッダーがテンプレート化され、対応する列がグループ化可能である場合、テンプレート化された要素は draggable 属性を false に設定する必要があります。

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

    public headerTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}
ts

    Web Components Hierarchical Grid 列移動概要の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    概要

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

    <igc-hierarchical-grid moving="true">
    ...
    <igc-row-island moving="true"></igc-row-island>
</igc-hierarchical-grid>
html
    Ignite UI for Web Components | CTA Banner

    API

    ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 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);
typescript

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

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

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

    イベント

    列のドラッグアンドドロップ操作を可能にする列移動に関連するイベントが複数あります。ColumnMovingStart、ColumnMoving、および ColumnMovingEnd です。

    IgcHierarchicalGridComponent の ColumnMovingEnd イベントを処理し、列が新しい位置にドロップされたときにカスタム ロジックを実装できます。たとえば、以下のスニペットでは、Change On Year(%) 列の後に Category のドロップをキャンセルできます。

    <igc-hierarchical-grid id="dataGrid" auto-generate="false" moving="true">
    <igc-column field="Category"></igc-column>
    <igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-hierarchical-grid>
html
    constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescript
    public onColumnMovingEnd(event) {
    if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}
typescript

    スタイル設定

    定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。

    色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>
html

    次に、関連する CSS プロパティをこのクラスに設定します:

    .grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}
css

    デモ

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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