Web Components Tree Grid の行ドラッグ

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

Web Components Tree Grid 行ドラッグの例

構成

IgcTreeGridComponent の行ドラッグを有効にするには、グリッドの rowDraggable を true に設定します。これが有効になると、行ドラッグハンドルが各行に表示されます。このハンドルは行ドラッグを開始するために使用できます。ドラッグハンドルをクリックしてボタンを押しながらカーソルを動かすと、グリッドの RowDragStart イベントが発生します。クリックをリリースすると、RowDragEnd イベントが発生します。

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

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

ドラッグハンドルアイコンは、グリッドの dragIndicatorIconTemplate を使用してテンプレート化できます。作成している例で、アイコンをデフォルトのもの (drag_indicator) から drag_handle に変更します。

そのためには、DragIndicatorIcon を使用して igc-tree-grid の本体内にテンプレートを渡すことができます。

<igc-tree-grid row-draggable="true" id="grid">
</igc-tree-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>`;
}

新しいアイコンテンプレートの設定後、DragIcon enum の DEFAULT アイコンも調整する必要があるため、ChangeIcon メソッドによって適切に変更されます。

enum DragIcon {
    DEFAULT = "drag_handle",
}

アプリケーションデモ

行の並べ替えデモ

グリッドの行ドラッグイベントを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。

<igc-tree-grid id="tGrid" row-draggable="true" primary-key="ID">
</igc-tree-grid>

constructor() {
    var tGrid = this.tGrid = document.getElementById('tGrid') as IgcTreeGridComponent;
    tGrid.addEventListener("rowDragStart", this.webTreeGridReorderRowStartHandler);
    tGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler);
}

[!Note] グリッドに primaryKey が指定されていることを確認してください。ロジックが行を適切に並べ替えられるように、行には一意の識別子が必要です。

rowDraggable が有効になり、ドロップエリアが定義されたら、ドロップイベントの単純なハンドラーを実装する必要があります。行をドラッグするときは、以下を確認してください:

行が展開されていますか? そうであれば、行を縮小します。
行はグリッド内にドロップされましたか?
そうであれば、ドラッグされた行が他のどの行にドロップされましたか?
ターゲット行が見つかれば、data 配列内のレコードの位置を入れ替えます。
行は最初に選択されてましたか? そうであれば、選択済みとしてマークします。

以下では、上記の実装を示します。

public webTreeGridReorderRowStartHandler(args: CustomEvent<IgcRowDragStartEventArgs){
        const draggedRow = args.detail.dragElement;
        const grid = this.treeGrid;
        const row = grid.getRowByIndex(draggedRow.getAttribute('data-rowindex'));
        if(row.expanded){
            row.expanded = false;
        }
    }

    public webTreeGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
        const ghostElement = args.detail.dragDirective.ghostElement;
        const dragElementPos = ghostElement.getBoundingClientRect();
        const grid = this.treeGrid;
        const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-tree-grid-row"));
        const currRowIndex = this.getCurrentRowIndex(rows,
        { x: dragElementPos.x, y: dragElementPos.y });
        if (currRowIndex === -1) { return; }
        const draggedRow = args.detail.dragData.data;
        const childRows = this.findChildRows(grid.data, draggedRow);
        //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);
        // reinsert the child rows
        childRows.reverse().forEach(childRow => {
            grid.data.splice(currRowIndex + 1, 0, childRow);
        });
    }

    private findChildRows(rows: any[], parent: any): any[] {
        const childRows: any[] = [];
        rows.forEach(row => {
            if (row.ParentID === parent.ID) {
                childRows.push(row);
                // Recursively find children of current row
                const grandchildren = this.findChildRows(rows, row);
                childRows.push(...grandchildren);
            }
        });
        return childRows;
    }

    public getCurrentRowIndex(rowList: any[], cursorPosition: any) {
        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;
    }

これらの簡単な手順で、ドラッグ/ドロップで行を並べ替えることができるグリッドを構成しました! 次のデモで、上記コードの動作を確認できます。

行の選択も有効で、ドラッグした行をドロップしても選択が保持されます。

制限

現在、rowDraggable に既知の制限はありません。

API リファレンス

rowDraggable
RowDragStart
RowDragEnd
IgcTreeGridComponent

その他のリソース

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