Arrastre de filas en React Grid

    The Ignite UI for React Row Dragging feature in React 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 IgrGrid component and is configurable via the rowDraggable input.

    React Grid Row Drag Example

    Configuration

    Para activar el arrastre de filas para tu,IgrGrid 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.

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

    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.

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

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

    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.

    <IgrGrid rowDraggable={true} primaryKey="ID" onRowDragEnd={webGridReorderRowHandler}>
</IgrGrid>

    [!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 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

    A continuación, puedes ver esto implementado:

    const webGridReorderRowHandler = (args: IgrRowDragEndEventArgs): void => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
    const currRowIndex = 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
    gridRef.current.deleteRow(args.detail.dragData.key);
    gridRef.current.data.splice(currRowIndex, 0, args.detail.dragData.data);
}

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

    ¡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.

    Mantener presionado el ícono de arrastrar le permitirá mover una fila a cualquier lugar de la cuadrícula:

    Limitations

    Actualmente, no se conocen limitaciones para elrowDraggable.

    API References

    Additional Resources

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