Row Dragging in Blazor Tree Grid

    The Ignite UI for Blazor Row Dragging feature in Blazor Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root IgbTreeGrid component and is configurable via the RowDraggable input.

    Blazor Tree Grid Row Drag Example

    Configuration

    Para activar el arrastre de filas para tu,IgbTreeGrid solo tienes que poner las cuadrículasRowDraggable en true. Una vez habilitada esta opción, se mostrará una fila para arrastrar una fila. Esta manilla puede usarse para iniciar el arrastre de hilera. Hacer clic en el mando de arrastrar y mover el cursor mientras mantienes pulsado el botón hará que el evento deRowDragStart la cuadrícula se active. Soltar el clic en cualquier momento haráRowDragEnd que el evento se active.

    <IgbTreeGrid RowDraggable="true">
</IgbTreeGrid>

    Templating the Drag Icon

    El icono del mango de arrastrar puede plantarse usando las deDragIndicatorIconTemplate la cuadrícula. En el ejemplo que estamos construyendo, cambiemos el icono del predeterminado (drag_indicator) a drag_handle.

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

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

    Application Demo

    Row Reordering Demo

    Con la ayuda de los eventos de arrastre de filas de la cuadrícula, puede crear una cuadrícula que le permita reordenar las filas arrastrándolas.

    <IgbTreeGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" RowDragStartScript="WebTreeGridReorderRowStartHandler" RowDragEndScript="WebTreeGridReorderRowHandler"></IgbTreeGrid>

    [!Note] Make sure that there is a PrimaryKey specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered.

    Una vezRowDraggable activado y definida una zona de caída, necesitas implementar un manejador sencillo para el evento de caída. Cuando se arrastra una fila, comprueba lo siguiente:

    • ¿Se amplía la fila? Si es así, colapsarlo.
    • ¿Se dejó caer la fila dentro de la cuadrícula?
    • Si es así, ¿en qué otra fila se dejó caer la fila arrastrada?
    • Una vez que hayas encontrado la fila objetivo, intercambia los registros en elData array
    • ¿Se seleccionó inicialmente la fila? Si es así, márquelo como seleccionado.

    A continuación, puedes ver esto implementado:

    //in JavaScript
igRegisterScript("WebTreeGridReorderRowStartHandler", (args) => {
    const draggedRow = args.detail.dragElement;
    const row = this.treeGrid.getRowByIndex(draggedRow.getAttribute('data-rowindex'));
    if (row.expanded) {
        row.expanded = false;
    }
}, false);

igRegisterScript("WebTreeGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-tree-grid")[0];
    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; }
    // remove the row that was dragged and place it onto its new location
    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);
    });
}, false);

function findChildRows(rows, parent) {
    const childRows = [];
    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;
}

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

    ¡Con estos sencillos pasos, ha configurado una cuadrícula que permite reordenar filas mediante arrastrar y soltar! Puede ver el código anterior en acción en la siguiente demostración.

    Observe que también tenemos habilitada la selección de filas y conservamos la selección al soltar la fila arrastrada.

    Limitations

    Actualmente, no se conocen limitaciones para elRowDraggable.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.