트리 그리드에서 행 끌 Web Components

    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 IgcTreeGridComponent component and is configurable via the RowDraggable input.

    Web Components Tree Grid Row Drag Example

    구성

    In order to enable row-dragging for your IgcTreeGridComponent, 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.

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

    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.

    <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

    그리드의 행 드래그 이벤트를 사용하면 행을 드래그하여 재정렬할 수 있는 그리드를 생성할 수 있습니다.

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

    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:

    • 행이 확장되었나요? 그렇다면 접으세요.
    • 행이 그리드 내부에 삭제되었습니까?
    • 그렇다면 드래그 행이 다른 어느 행에 드롭되었나요?
    • ​목표 행을 찾으면 레코드들의 위치를 배열에서data 바꿔 놓습니다
    • 행이 처음에 선택되었습니까? 그렇다면 선택됨으로 표시하세요.

    아래에서 이것이 구현된 것을 볼 수 있습니다.

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

    이러한 몇 가지 간단한 단계를 통해 드래그/드롭을 통해 행을 재정렬할 수 있는 그리드를 구성했습니다! 다음 데모에서 위 코드가 실제로 작동하는 모습을 볼 수 있습니다.

    또한 행 선택이 활성화되어 있으며 드래그된 행을 삭제할 때 선택이 유지됩니다.

    Limitations

    Currently, there are no known limitations for the RowDraggable.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.