Arrastar linha em Web Components grade de árvore

    O recurso Ignite UI for Web Components arrastar linhas em Web Components grade de árvore é facilmente configurável e é usado para reorganizar linhas dentro da grade arrastando e soltando-as em uma nova posição usando o mouse. Ele é inicializado no componente raiz IgcTreeGridComponent e é configurável por meio da rowDraggable entrada.

    Web Components Tree Grid Row Drag Example

    Configuração

    Para habilitar o arrasto de linha para você IgcTreeGridComponent, tudo o que você precisa fazer é definir a grade rowDraggable como true. Depois que isso estiver ativado, uma alça de arrastar linha será exibida em cada linha. Essa alça pode ser usada para iniciar o arrasto de linha. Clicar na alça de arrastar e mover o cursor enquanto mantém pressionado o botão fará com que o evento da RowDragStart grade seja acionado. Liberar o clique a qualquer momento fará com que RowDragEnd o evento seja acionado.

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

    Templating the Drag Icon

    O ícone da alça de arrastar pode ser modelado usando o da grade dragIndicatorIconTemplate. No exemplo que estamos criando, vamos alterar o ícone do padrão (drag_indicator) para drag_handle.

    Para fazer isso, podemos usar o DragIndicatorIcon para passar um modelo dentro do igc-tree-grid corpo:

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

    Com a ajuda dos eventos de arrastar linha da grade, você pode criar uma grade que permite reordenar as linhas arrastando-as.

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

    constructor() {
    var tGrid = this.tGrid = document.getElementById('tGrid') as IgcTreeGridComponent;
    tGrid.addEventListener("rowDragStart", this.webTreeGridReorderRowStartHandler);
    tGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler);
}

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

    Uma vez rowDraggable habilitado e uma zona de queda definida, você precisa implementar um manipulador simples para o evento de queda. Quando uma linha é arrastada, verifique o seguinte:

    • A linha é expandida? Em caso afirmativo, recolha-o.
    • A linha foi lançada dentro da grade?
    • Em caso afirmativo, em qual outra linha a linha arrastada foi solta?
    • Depois de encontrar a linha de destino, troque os lugares dos registros na data matriz
    • A linha foi inicialmente selecionada? Em caso afirmativo, marque-o como selecionado.

    Abaixo, você pode ver isso implementado:

    public webTreeGridReorderRowStartHandler(args: CustomEvent<IgcRowDragStartEventArgs){
        const draggedRow = args.detail.dragElement;
        const grid = this.treeGrid;
        const row = grid.getRowByIndex(draggedRow.getAttribute('data-rowindex'));
        if(row.expanded){
            row.expanded = false;
        }
    }

    public webTreeGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
        const ghostElement = args.detail.dragDirective.ghostElement;
        const dragElementPos = ghostElement.getBoundingClientRect();
        const grid = this.treeGrid;
        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; }
        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);
        });
    }

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

    public getCurrentRowIndex(rowList: any[], cursorPosition: any) {
        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;
    }

    Com essas etapas fáceis, você configurou uma grade que permite reordenar linhas por meio de arrastar/soltar! Você pode ver o código acima em ação na demonstração a seguir.

    Observe que também temos a seleção de linha habilitada e preservamos a seleção ao soltar a linha arrastada.

    Limitations

    Atualmente, não há limitações conhecidas para o rowDraggable.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.