Web Components Hierarchical Grid の行ドラッグ

Web Components Hierarchical Grid の Ignite UI for Web Components 行ドラッグ機能は簡単に構成でき、マウスを使用して行を新しい位置にドラッグ アンド ドロップすることで、グリッド内の行を再配置するために使用されます。これはルートの IgcHierarchicalGrid コンポーネントで初期化され、IgcHierarchicalGrid.rowDraggable 入力を介して構成できます。

Web Components Hierarchical Grid 行ドラッグの例

構成

IgcHierarchicalGrid の行ドラッグを有効にするには、グリッドの IgcHierarchicalGrid.rowDraggable を true に設定するだけです。これが有効になると、行ドラッグ ハンドルが各行に表示されます。このハンドルを使用して行ドラッグを開始できます。ドラッグ ハンドルをクリックし、マウスボタンを押したままカーソルを移動すると、グリッドの IgcIgcHierarchicalGrid.rowDragStart イベントが発生します。ドラッグ中にマウスボタンを離すと IgcIgcHierarchicalGrid.rowDragEnd イベントが発生します。

<igc-hierarchical-grid row-draggable="true">
</igc-hierarchical-grid>

ドロップ エリア

はじめに、DragDropModule を登録する必要があります。

import { IgcDragDropModule } from 'igniteui-webcomponents';
// ...
ModuleManager.register(
    IgcDragDropModule
);

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

    this._bind = () => {
        grid.rowDragGhost = this.rowDragGhostTemplate;
    }
    this._bind();
}

public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
    return html`<igc-icon fontSet="material">arrow_right_alt</igc-icon>`;
}

ドラッグ アイコンのテンプレート化

ドラッグ ハンドル アイコンは、グリッドの DragIndicatorIconTemplate を使用してテンプレート化できます。作成中の例では、デフォルトのアイコン (drag_indicator) を drag_handle に変更してみましょう。

<igc-hierarchical-grid row-draggable="true" id="grid">
</igc-hierarchical-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate;
}

public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`<igc-icon name="drag_handle" collection="material"></igc-icon>`;
}

デモ

アプリケーション デモ

行の並べ替えデモ

グリッドの行ドラッグ イベントを使用すると、行をドラッグして並べ替えられるグリッドを作成できます。

<igc-hierarchical-grid id="hGrid" row-draggable="true" primary-key="ID">
</igc-hierarchical-grid>

constructor() {
    var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler)
}

IgcHierarchicalGrid.rowDraggable が有効になり、ドロップ エリアが定義されたら、ドロップ イベント用の簡単なハンドラーを実装する必要があります。行がドラッグされたときは、次を確認します。

• 行は展開されているか。展開されている場合は折りたたむ
• 行はグリッド内にドロップされたか
• ドロップされた場合、ドラッグされた行が別のどの行にドロップされたか
• ターゲット行が見つかったら、Data 配列内でレコードの位置を入れ替える
• 行は元々選択されていたか。選択されていた場合は、選択済みとしてマークする

以下は、その実装例です。

public webGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName["igc-hierarchical-grid"](0) as any;
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
    const currRowIndex = this.getCurrentRowIndex(rows,
    { x: dragElementPos.x, y: dragElementPos.y });
    if (currRowIndex === -1) { return; }
    // remove the row that was dragged and place it onto its new location
    grid.deleteRow(args.detail.dragData.key);
    grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
public getCurrentRowIndex(rowList: any[], cursorPosition) {
    for (const row of rowList) {
        const rowRect = row.getBoundingClientRect();
        if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
            cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
            // return the index of the targeted row
            return parseInt(row.attributes["data-rowindex"].value);
        }
    }
    return -1;
}

これらの簡単な手順で、ドラッグ アンド ドロップによる行の並べ替えが可能なグリッドを設定できました。上記のコードの動作は、以下のデモで確認できます。

行選択も有効になっており、ドラッグされた行をドロップしたときに選択状態が保持されることに注目してください。

制限

現在、IgcHierarchicalGrid.rowDraggable に関する既知の制限事項はありません。

API リファレンス

その他のリソース

コミュニティは常に新しいアイデアを歓迎しています。

• Ignite UI for Web Components フォーラム
• Ignite UI for Web Components GitHub