계층형 그리드 열 재정렬 및 이동

    Ignite UI for Angular의 Hierarchical Grid 구성 요소는 표준 드래그/드롭 마우스 또는 터치 제스처 또는 Column Moving API를 사용하여 열을 재정렬할 수 있는 Column Moving 기능을 제공합니다. 열 이동은 고정된 열과 고정되지 않은 열, 그리고 다중 열 헤더에서 모두 작동합니다. 열을 고정된 영역으로 이동하면 열이 고정되고 그 반대의 경우도 마찬가지이며, 열을 고정된 영역 밖으로 이동하면 열의 고정이 해제됩니다.

    Note

    열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.

    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

    고정된 영역이 최대 허용 너비(전체 계층적 그리드 너비의 80%)를 초과하는 경우 시각적 단서가 최종 사용자에게 놓기 작업이 금지되어 고정이 불가능함을 알려줍니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.

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

    Angular Hierarchical Grid Column Moving Overview Example

    개요

    Column moving feature is enabled on a per-grid level, meaning that the igx-hierarchical-grid could have either movable or immovable columns. This is done via the moving input of the igx-grid.

    <igx-hierarchical-grid [moving]="true">
    ...
    <igx-row-island [moving]="true"></igx-row-island>
</igx-hierarchical-grid>

    API

    끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 두 가지 API 메서드도 제공합니다.

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

    이벤트

    There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are columnMovingStart, columnMoving and columnMovingEnd. You can subscribe to the columnMovingEnd event of the igx-hierarchical-grid to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column.

    <igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Country'"></igx-column>
    <igx-column [field]="'Phone'" [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>

    public onColumnMovingEnd(event) {
    if (event.source.field === "Phone" && event.target.field === "Country") {
        event.cancel = true;
    }
}

    스타일링

    To get started with styling the Hierarchical Grid column moving headers, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the grid-theme and accepts the $ghost-header-background, $ghost-header-text-color and the $ghost-header-icon-color parameters.

    // Define dark theme for the column moving
$dark-grid-column-moving-theme: grid-theme(
  $ghost-header-text-color: #f4d45c,
  $ghost-header-background: #575757,
  $ghost-header-icon-color: #f4bb5c
);
    Note

    Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

    마지막 단계는 해당 테마와 함께 구성 요소 믹스인을 포함하는 것입니다.

    @include css-vars($dark-grid-column-moving-theme);

    Demo

    Note

    The sample will not be affected by the selected global theme from Change Theme.

    API References

    Additional Resources

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