React Tree Grid の行ドラッグ

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

React Tree Grid 行ドラッグの例

構成

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

<IgrTreeGrid rowDraggable={true}>
</IgrTreeGrid>

ドロップ領域のスタイル設定

ドロップ ハンドラが正しく設定されたら、あとはドロップ領域をスタイル設定します。

    const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => {
        return (
            <>
                <IgrIcon name="drag_handle" collection="material" />
            </>
        );
    }

    <IgrTreeGrid rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}>
    </IgrTreeGrid>

デモ

アプリケーション デモ

行ドラッグ イベントの使用

<IgrTreeGrid rowDraggable={true} primaryKey="ID" onRowDragStart={webTreeGridReorderRowStartHandler} onRowDragEnd={webTreeGridReorderRowStartHandler}>
</IgrTreeGrid>

Once IgrTreeGrid.rowDraggable is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following:

• Is the row expanded? If so, collapse it.
• Was the row dropped inside of the grid?
• If so, on which other row was the dragged row dropped?
• Once you’ve found the target row, swap the records’ places in the Data array
• Was the row initially selected? If so, mark it as selected.

Below, you can see this implemented:

const webTreeGridReorderRowStartHandler = (args: IgrRowDragStartEventArgs) => {
    const draggedRow = args.detail.dragData;
    if (draggedRow.expanded) {
        draggedRow.expanded = false;
    }
}

const webTreeGridReorderRowHandler = (args: IgrRowDragEndEventArgs): void => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-tree-grid-row"));
    const currRowIndex = getCurrentRowIndex(rows,
    { x: dragElementPos.x, y: dragElementPos.y });
    if (currRowIndex === -1) { return; }
    const draggedRow = args.detail.dragData.data;
    const childRows = findChildRows(treeGridRef.current.data, draggedRow);
    //remove the row that was dragged and place it onto its new location
    treeGridRef.current.deleteRow(args.detail.dragData.key);
    treeGridRef.current.data.splice(currRowIndex, 0, args.detail.dragData.data);
    // reinsert the child rows
    childRows.reverse().forEach(childRow => {
        treeGridRef.current.data.splice(currRowIndex + 1, 0, childRow);
    });
}

const 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 = findChildRows(rows, row);
            childRows.push(...grandchildren);
        }
    });
    return childRows;
}

const 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;
}

With these few easy steps, you’ve configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo.

Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row.

行の並べ替えデモ

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

API リファレンス

カーソル位置に基づいてドラッグ ゴーストを変更する

以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。

まず、ドラッグ ゴーストに使用するテンプレートを指定します。DropName プロパティは動的に変化し、カーソルが置かれている行の名前を取得します。