Row Dragging in React Grid

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

    React Grid Row Drag Example

    Configuration

    In order to enable row-dragging for your IgrGrid, all you need to do is set the grid's rowDraggable to true. Once this is enabled, a row-drag handle will be displayed on each row. This handle can be used to initiate row dragging. Clicking on the drag-handle and moving the cursor while holding down the button will cause the grid's RowDragStart event to fire. Releasing the click at any time will cause RowDragEnd event to fire.

    <IgrGrid rowDraggable="true">
</IgrGrid>

    Templating the Drag Icon

    The drag handle icon can be templated using the grid's dragIndicatorIconTemplate. In the example we're building, let's change the icon from the default one (drag_indicator) to drag_handle.

    To do so, we can use the DragIndicatorIcon to pass a template inside of the IgrGrid's body:

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

<IgrGrid rowDraggable="true" dragIndicatorIcon={dragIndicatorIconTemplate}>
</IgrGrid>

    Application Demo

    Row Reordering Demo

    With the help of the grid's row drag events you can create a grid that allows you to reorder rows by dragging them.

    <IgrGrid rowDraggable="true" primaryKey="ID" rowDragEnd={webGridReorderRowHandler}>
</IgrGrid>

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

    Once rowDraggable is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following:

    • A linha foi lançada dentro da grade?
    • Em caso afirmativo, em qual outra linha a linha arrastada foi solta?
    • Once you've found the target row, swap the records' places in the data array

    Below, you can see this implemented:

    function webGridReorderRowHandler(grid: IgrGridBaseDirective, args: IgrRowDragEndEventArgs): void {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    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);
}
    
function 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;
}

    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

    Currently, there are no known limitations for the rowDraggable.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.