Grid 열 이동

Ignite UI for Angular Grid 컴포넌트는 표준 드래그/드롭 마우스 또는 터치 제스처로 열 이동을 사용해 열을 재정렬할 수 있도록 합니다.

열 이동은 고정된 열에서도 작동합니다. 핀 고정 해제된 열을 드래그하여 핀 고정 영역 안으로 드롭하여 해당 열을 핀 고정시키거나, 반대로 핀 고정된 열을 드래그하여 핀 고정 영역 밖으로 드롭하여 해당 열을 핀 고정 해제할 수 있습니다.

Note

헤더가 다시 적용되고 해당 열이 이동 가능(또는 그룹화 가능)한 경우, 적용된 이벤트를 모두 처리할 수 있도록 적용 요소에서 draggablefalse로 설정해야 합니다!

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

데모


개요

열 이동 기능은 열 단위 수준에서 사용할 수 있으며 igx-grid에 이동 가능한 열 및 이동 불가한 열을 혼합하여 사용할 수 있습니다. 이것은 igx-columnmovable 입력을 통해 제어할 수 있습니다.

<igx-column [field]="'Category'" [movable]="true"></igx-column>
Note

핀 고정 영역이 최대 허용 너비(전체 Grid 너비의 80%)를 초과하면 드롭 조작이 금지되어 있어 핀 고정이 불가함을 힌트 표시로 최종 사용자에게 알립니다. 즉, 핀 고정 영역에 열을 드롭할 수 없게 됩니다.

이벤트

열의 드래그 앤드 드롭 조작을 설정하기 위해 열 이동과 관련된 복수의 이벤트가 제공됩니다. onColumnMovingStart, onColumnMovingonColumnMovingEnd가 있습니다. igx-gridonColumnMovingEnd 이벤트를 처리하고 열을 새로운 위치로 드롭할 때 일부 사용자 논리를 구현할 수 있습니다. 예를 들면, Change On Year(%) 열 뒤에 카테고리 드롭을 취소할 수 있습니다.

<igx-grid #dataGrid [data]="data" [autoGenerate]="false" (onColumnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'" [movable]="true"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" [movable]="true" ></igx-column>
</igx-grid>
public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}

API 참조

추가 리소스

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