Grid 행 드래그

    Ignite UI for Angular Grid에서 RowDrag는 루트 igx-grid 컴포넌트에서 초기화되며 rowDraggable 입력을 통해 구성할 수 있습니다. 행 드래그를 활성화하면 사용자가 행 드래그를 시작할 수 있는 행 드래그 핸들을 제공합니다.

    데모

    컨피규레이터

    igx-grid에 행 드래그를 활성화하려면 그리드의 rowDraggable을 **true**로 설정하면 됩니다. 이 기능이 활성화되면 각 행에 행 드래그 핸들이 표시됩니다. 이 핸들은 행 드래그를 시작하는 데 사용할 수 있습니다.

    <igx-grid [rowDraggable]="true">
 ...
</igx-grid>

    버튼을 누른 상태에서 드래그 핸들을 클릭하고 커서를 움직이면 그리드의 rowDragStart 이벤트가 실행됩니다. 언제든지 클릭을 해제하면 rowDragEnd 이벤트가 실행됩니다.

    아래에서 행 드래그를 지원하도록 igx-grid를 구성하는 방법과 드롭 이벤트를 적절하게 처리하는 방법에 대한 내용을 살펴볼 수 있습니다.

    이 예제에서는 그리드에서 다른 행으로 행을 드래그하면 첫 번째 데이터 소스에서 행을 삭제하고 두 번째 행에 추가하는 것을 보여 줍니다.

    드롭 영역

    행 드래그를 활성화하는 것은 매우 간단한데 다음은 행 드롭을 처리하는 방법을 설정해야 합니다. igxDrop 지시문을 사용하여 행을 삭제할 위치를 정의할 수 있습니다.

    먼저 앱 모듈에서 IgxDragDropModule을 가져와야 합니다:

    import { ..., IgxDragDropModule } from 'igniteui-angular';
...
@NgModule({
    imports: [..., IgxDragDropModule]
})

    그런 다음 템플릿에서 지시문의 선택기를 사용하여 드롭 영역을 정의합니다.

    이 경우, 드롭 영역은 모두 행을 드롭할 두 번째 그리드가 됩니다.

    <igx-grid #targetGrid igxDrop [data]="data2" [autoGenerate]="false" [emptyGridTemplate]="dragHereTemplate"
    (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)" (onDrop)="onDropAllowed($event)" [primaryKey]="'ID'">
    ...
</igx-grid>

    그리드는 처음에는 비어 있으므로 사용자에게 유용한 템플릿을 정의합니다.

    <ng-template #dragHereTemplate>
    Drop a row to add it to the grid
</ng-template>

    드롭 영역 이벤트 핸들러

    템플릿에서 드롭 영역을 정의한 후에는 컴포넌트의 .ts 파일에 있는 igxDrop의 onEnter, onLeave 및 onDrop 이벤트에 대한 핸들러를 선언해야 합니다.

    먼저, onEnter 및 onLeave 핸들러를 살펴보겠습니다. 이 방법은 드래그 고스트 아이콘을 변경하여 사용자가 행을 드롭할 수 있는 영역 위에 있음을 표시할 수 있습니다:

    export class IgxGridRowDragComponent {
    ...
    public onEnterAllowed(args) {
        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
    }

    public onLeaveAllowed(args) {
        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
    }

    private changeGhostIcon(ghost, icon: string) {
        if (ghost) {
            const currentIcon = ghost.querySelector(".igx-grid__drag-indicator  > igx-icon");
            if (currentIcon) {
                currentIcon.innerText = icon;
            }
        }
    }

}

    changeGhostIcon 프라이빗 메소드는 드래그 고스트 내부의 아이콘을 변경합니다. 이 메소드의 논리는 아이콘이 포함된 요소(드래그 인디케이터 컨테이너에 적용된 igx-grid__drag-indicator 클래스 사용)를 찾아 요소의 내부 텍스트를 전달된 것으로 변경합니다. 아이콘 자체는 재료 폰트 세트에 있으며 별도의 **enum**으로 정의됩니다:

    enum DragIcon {
    DEFAULT = "drag_indicator",
    ALLOW = "add"
}

    다음으로, 사용자가 실제로 드롭 영역 내에 행을 드롭할 때 실행되는 것을 정의해야 합니다.

    export class IgxGridRowDragComponent {
    @ViewChild("sourceGrid", { read: IgxGridComponent }) public sourceGrid: IgxGridComponent;
    @ViewChild("targetGrid", { read: IgxGridComponent }) public targetGrid: IgxGridComponent;
    ... 
    public onDropAllowed(args) {
        args.cancel = true;
        this.targetGrid.addRow(args.dragData.data);
        this.sourceGrid.deleteRow(args.dragData.key);
    }
    ...
}

    ViewChild 데코레이터와 드롭 핸들을 통해 각 그리드에 대한 참조를 다음과 같이 정의합니다:

    • 이벤트 취소
    • 드롭되는 행의 데이터를 포함하는 행을 targetGrid에 추가
    • 드래그한 행을 sourceGrid에서 삭제

    드래그 아이콘 템플레이팅

    드래그 핸들 아이콘은 그리드의 dragIndicatorIconTemplate를 사용하여 템플레이팅할 수 있습니다. 구축 중인 예제에서 아이콘을 기본(drag_indicator)에서 drag_handle로 변경해 보겠습니다. 이를 위해 igxDragIndicatorIcon을 사용하여 igx-grid의 내부에 템플릿을 전달할 수 있습니다:

    <igx-grid>
...
    <ng-template igxDragIndicatorIcon>
        <igx-icon>drag_handle</igx-icon>
    </ng-template>
...
</igx-grid>

    새로운 아이콘 템플릿을 설정하면 DragIcon enum에서 DEFAULT 아이콘도 조정해야 하므로 changeIcon 메소드에 의해 적절히 변경됩니다:

    enum DragIcon {
    DEFAULT = "drag_handle",
    ...
}

    드롭 핸들러가 올바르게 설정되면 잘 된 것입니다! 구성 결과는 다음과 같을 것입니다:

    예제 데모

    The following sample demonstrates how to configure row reordering in the grid. Holding onto the drag icon will allow you to move a row anywhere in the grid.

    제한 사항

    rowDraggable 지시문을 사용할 경우, 고려해야 할 몇 가지 사항이 있습니다:

    Note

    행 드롭 이벤트를 처리할 경우, 행 드래그 고스트의 남은 요소가 표시되지 않도록 eventArgs.cancel을 **true**로 설정해야 합니다

    API 참조

    추가 리소스

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