Row Dragging in Web Components Tree Grid

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

Web Components Tree Grid Row Drag Example

Configuration

In order to enable row-dragging for your IgcTreeGrid, all you need to do is set the grid’s IgcTreeGrid.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 IgcIgcTreeGrid.rowDragStart event to fire. Releasing the click at any time will cause IgcIgcTreeGrid.rowDragEnd event to fire.

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

Drop Areas

First we need to register the DragDropModule:

import { IgcDragDropModule } from 'igniteui-webcomponents';
// ...
ModuleManager.register(
    IgcDragDropModule
);

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

    this._bind = () => {
        grid.rowDragGhost = this.rowDragGhostTemplate;
    }
    this._bind();
}

public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
    return html`<igc-icon fontSet="material">arrow_right_alt</igc-icon>`;
}

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.

Example Demo

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.

<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);
}

Once IgcTreeGrid.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:

• Is the row expanded? If so, collapse it.
• Was the row dropped inside of the grid?
• If so, on which other row was the dragged row dropped?
• Once you’ve found the target row, swap the records’ places in the Data array
• Was the row initially selected? If so, mark it as selected.

Below, you can see this implemented:

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;
    }

With these few easy steps, you’ve configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo.

Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row.

Limitations

Currently, there are no known limitations for the IgcTreeGrid.rowDraggable.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub