Arrastre de filas en Web Components cuadrícula

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

    Web Components Grid Row Drag Example

    Configuración

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

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

    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.

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

    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.

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

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler)
}

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

    public webGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0] as any;
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-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);
}

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