Arrastre de filas en Web Components cuadrícula jerárquica

    La función de arrastre de filas Ignite UI for Web Components en Web Components cuadrícula jerárquica es fácilmente configurable y se utiliza para reorganizar filas dentro de la cuadrícula arrastrándolas y soltándolas en una nueva posición con el mouse. Se inicializa en el componente raíz IgcHierarchicalGridComponent y se puede configurar a través de la rowDraggable entrada.

    Web Components Hierarchical Grid Row Drag Example

    Configuración

    Para habilitar el arrastre de filas para su IgcHierarchicalGridComponent, todo lo que necesita hacer es establecer la cuadrícula rowDraggable en true. Una vez que esté habilitado, se mostrará un controlador de arrastre de fila en cada fila. Este controlador se puede usar para iniciar el arrastre de filas. Al hacer clic en el controlador de arrastre y mover el cursor mientras se mantiene presionado el botón, se activará el evento de RowDragStart la cuadrícula. Soltar el clic en cualquier momento hará que RowDragEnd se active el evento.

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

    Templating the Drag Icon

    El icono del controlador de arrastre se puede crear como plantilla usando dragIndicatorIconTemplate de la cuadrícula. En el ejemplo que estamos creando, cambiemos el ícono predeterminado (drag_indicator) a drag_handle.

    Para hacerlo, podemos usar el DragIndicatorIcon para pasar una plantilla dentro del cuerpo de the igc-hierarchical-grid:

    <igc-hierarchical-grid row-draggable="true" id="grid">
</igc-hierarchical-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-hierarchical-grid id="hGrid" row-draggable="true" primary-key="ID">
</igc-hierarchical-grid>

    constructor() {
    var hGrid = this.grihGridd = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler)
}

    [!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 vez que rowDraggable esté habilitado y se haya definido una zona de colocación, debe implementar un controlador simple para el evento de colocación. Cuando se arrastra una fila, verifique 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 soltó la fila arrastrada?
    • Una vez que haya encontrado la fila de destino, intercambie las ubicaciones de los registros en la matriz data.
    • ¿Se seleccionó inicialmente la fila? Si es así, márquelo como seleccionado.

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

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

    Limitations

    Actualmente, no existen limitaciones conocidas para rowDraggable.

    API References

    Additional Resources

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