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

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

Note

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

Note

열 헤더가 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false로 설정해야 합니다! 이를 통해 요소에서 발생하는 모든 이벤트에 대한 핸들러를 연결할 수 있습니다. 그렇지 않으면 이벤트가 igxDrag 지시어에 의해 소비됩니다.

Note

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

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

Angular Hierarchical Grid Column Moving Overview Example

개요

열 이동 기능은 그리드별 수준에서 활성화됩니다. 즉, igx-hierarchical-grid에는 이동 가능하거나 이동 불가능한 열이 있을 수 있습니다. 이는 igx-grid의 moving 입력을 통해 수행됩니다.

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

API

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

moveColumn- 다른 열(대상) 앞이나 뒤로 열을 이동합니다. 첫 번째 매개변수는 이동할 컬럼이고, 두 번째 매개변수는 대상 컬럼입니다. 또한 대상 열 앞이나 뒤에 열을 배치할지 여부를 결정하는 선택적인 세 번째 매개 변수 position (DropPosition 값을 나타냄)를 허용합니다.

// 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- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.

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

API를 사용할 때 작업이 성공하면 columnMovingEnd 이벤트만 발생합니다. 또한 드래그 앤 드롭 기능과 비교하여 API를 사용하면 moving 속성을 true로 설정할 필요가 없습니다.

이벤트

열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이들은 columnMovingStart, columnMoving 및 columnMovingEnd 입니다. igx-hierarchical-grid의 columnMovingEnd 이벤트를 구독하면 열이 새 위치로 삭제될 때 일부 사용자 지정 논리를 구현할 수 있습니다. 예를 들어, Change On Year(%) 열 이후에 범주 삭제를 취소할 수 있습니다.

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

스타일링

계층적 그리드 열 이동 헤더의 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

가장 간단한 접근 방식에 따라 grid-theme 확장하고 $ghost-header-background, $ghost-header-text-color 및 $ghost-header-icon-color 매개변수를 허용하는 새로운 테마를 만듭니다.

// 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
);

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

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

Note

구성요소 뷰 캡슐화 전략에 따라::ng-deep 사용하여 이 캡슐화를 penetrate 해야 할 수도 있습니다.

:host {
    ::ng-deep {
        @include grid($dark-grid-column-moving-theme);
    }
}

Defining a color palette

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette는 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$yellow-color: #F4D45C;
$black-color: #575757;

$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);

그런 다음 igx-color를 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$dark-grid-column-moving-theme: grid-theme(
    $palette: $dark-palette,
    $ghost-header-text-color: color($dark-palette, "primary", 400),
    $ghost-header-background: color($dark-palette, "secondary", 200),
    $ghost-header-icon-color: color($dark-palette, "primary", 500)
);

Note

색상과 팔레트는 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using Schemas

테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

모든 구성 요소(이 경우 light-grid)에 대해 제공되는 사전 정의된 두 스키마 중 하나를 확장합니다.

// Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
        (
            ghost-header-text-color:(
               color: ("primary", 400)
            ),
            ghost-header-background:(
               color: ("secondary", 200)
            ),
            ghost-header-icon-color:(
               color:( "primary", 500)
            )
        )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(빛 또는 어두운), 이는 기본적으로 사용자 정의 스키마로 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

// Extending the global dark-schema
$custom-light-schema: extend($light-schema,(
    igx-grid: $dark-grid-column-moving-schema,
));

// Defining dark-grid-theme with the global dark schema
$dark-grid-column-moving-theme: grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

Demo

Note

샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

API References

• ColumnComponent
• IgxHierarchicalGridComponent
• IgxHierarchicalGridComponent Styles

Additional Resources

• 계층적 그리드 개요
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 고정
• 열 크기 조정
• 선택

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub