Arrastar linha em React grade hierárquica

    O recurso Ignite UI for React arrastar linha em React grade hierárquica é 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 IgrHierarchicalGrid e é configurável por meio da rowDraggable entrada.

    React Hierarchical Grid Row Drag Example

    Configuration

    Para habilitar o arrasto de linha para você IgrHierarchicalGrid, 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.

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

    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.

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

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

    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.

    <IgrHierarchicalGrid rowDraggable={true} primaryKey="ID" onRowDragEnd={webHierarchicalGridReorderRowHandler}>
</IgHierarchicalGrid>

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

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

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