Row Dragging in Blazor Grid

    O recurso Ignite UI for Blazor arrastar linha em Blazor grade é 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 IgbGrid e é configurável por meio da RowDraggable entrada.

    Blazor Grid Row Drag Example

    Configuration

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

    <IgbGrid RowDraggable="true">
</IgbGrid>

    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 IgbGrid corpo:

    <IgbGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" DragIndicatorIconTemplate="dragIndicatorIconTemplate" @ref="grid">
</IgbGrid>

private RenderFragment<IgbGridEmptyTemplateContext> dragIndicatorIconTemplate = (context) =>
{
    return @<div>
        <IgbIcon IconName="drag_handle" Collection="material"></IgbIcon>
    </div>;
};

    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.

    <IgbGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" RowDragEndScript="WebGridReorderRowHandler"></IgbGrid>

// In JavaScript
igRegisterScript("WebGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0];
    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);
}, false);

function getCurrentRowIndex(rowList, 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;
}

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

    Abaixo, você pode ver isso implementado:

    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.

    Segurar o ícone de arrastar permitirá que você mova uma linha para qualquer lugar na grade:

    Limitations

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.