Pivot Grid 열 이동

    The Pivot Grid component in Ignite UI for Angular provides the Column Moving feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. Column moving works both with pinned and unpinned columns and with Multi-column Headers. Moving a column into the pinned area pins the column and vice versa, moving a column outside of the pinned area unpins the column.

    Note

    Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.

    Note

    If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the igxDrag directive.

    Note

    If the pinned area exceeds its maximum allowed width (80% of the total Pivot Grid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

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

    데모

    개요

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

    API

    In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically:

    moveColumn - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter position (representing a DropPosition(https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/dropposition.html) value), which determines whether to place the column before or after the target column.

    // Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

    move - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.

    // Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

    Note that when using the API, only the columnMovingEnd event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the moving property to true.

    이벤트

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

    API 참조

    * [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) * [IgxPivotGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpivotgridcomponent.html) * [IgxPivotGridComponent 스타일](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#mixin-igx-grid)

    추가 리소스

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