Blazor Hierarchical Grid の行ドラッグ

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

    Blazor Hierarchical Grid 行ドラッグの例

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

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

    構成

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

    <IgbHierarchicalGrid RowDraggable="true">
</IgbHierarchicalGrid>
razor

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

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

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

    <IgbHierarchicalGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" DragIndicatorIconTemplate="dragIndicatorIconTemplate" @ref="grid">
</IgbHierarchicalGrid>

private RenderFragment<IgbGridEmptyTemplateContext> dragIndicatorIconTemplate = (context) =>
{
    return @<div>
        <IgbIcon IconName="drag_handle" Collection="material"></IgbIcon>
    </div>;
};
razor

    アプリケーション デモ

    行の並べ替えデモ

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

    <IgbHierarchicalGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" RowDragEndScript="WebHierarchicalGridReorderRowHandler"></IgbHierarchicalGrid>

// In JavaScript
igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-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);
}, false);
 
function getCurrentRowIndex(rowList, 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;
}
razor

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

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

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

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

    <IgbHierarchicalGrid Data="SingersData" PrimaryKey="ID" RowDraggable="true" RowDragEndScript="WebGridReorderRowHandler"></IgbHierarchicalGrid >

//In JavaScript
igRegisterScript("WebGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-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);
}, false);
 
function getCurrentRowIndex(rowList, 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;
}
razor

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

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    制限

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

    API リファレンス

    その他のリソース

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