Angular 셀 선택

선택 기능을 사용하면 머티리얼 UI 기반 계층형 그리드에서 풍부한 데이터 선택 기능을 사용할 수 있습니다. 강력한 API와 사용하기 쉬운 메소드 덕분에 다양한 이벤트와 단일 선택 작업이 가능합니다. 계층적 그리드는 이제 셀 선택을 위한 세 가지 모드를 지원하며 cellSelection 속성을 변경하여 모드 간에 쉽게 전환할 수 있습니다. 셀 선택을 비활성화할 수 있으며, 그리드 내에서 하나의 셀만 선택하거나​ ​그리드에서 여러 셀을 선택할 수 있으며 이는 기본 옵션으로 제공됩니다. 계층형 그리드에서는 그리드 수준에서 셀 선택 모드를 지정할 수 있습니다. 예를 들어 상위 그리드에서는 다중 셀 선택을 활성화할 수 있지만 하위 그리드에서는 셀 선택 모드를 단일 또는 비활성화할 수 있습니다. 하지만 각 옵션에 대해 더 자세히 살펴보겠습니다.

Angular Cell Selection Example

아래 샘플은 계층적 그리드의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

Selection types

Hierarchical Grid Multiple-cell Selection

이는 상위 및 하위 그리드 모두의 기본 셀 선택 모드입니다. 한 번에 하나의 그리드로 셀을 선택할 수 있지만 교차 그리드 범위를 선택하거나 여러 그리드에서 셀을 선택할 수는 없습니다. 범위 선택 및 마우스 드래그 기능과 관련된 각 키 조합은 동일한 그리드에서만 사용할 수 있습니다.

셀을 선택하는 방법:

• ​Mouse drag- 셀의 직사각형 데이터 선택이 수행됩니다.
• ​Ctrl key 누르기 + Mouse drag- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
• Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다. Shift key 누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다.
• ​Shift key 누른 상태에서 Arrow keys 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• ​Shift key 누른 상태에서 Ctrl + Arrow keys와 Ctrl + Home/End 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• ​Ctrl key 누른 상태에서 Left Mouse key 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
• 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

Hierarchical Grid Single Selection

​[cellSelection]="'single'" 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 mouse drag 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

Note

단일 셀을 선택한 경우 selected 이벤트가 발생합니다. selection mode ~이다 single 또는 multiple. 다중 셀 선택 모드에서 셀 범위를 선택할 때 rangeSelected 이벤트가 방출됩니다.

Hierarchical Grid None selection

셀 선택을 비활성화하려면 [cellSelection]="'none'" 속성을 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고​ ​activation style만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

Styling Guidelines

테마 엔진은 range of selected cells 스타일을 지정할 수 있는 속성을 노출합니다.

Import theme

선택 항목 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

Define colors

완료되면 igx-contrast-color 및 igx-color 기능을 사용할 수 있습니다. 이를 통해 선택 범위에 사용하려는 색상을 정의합니다.

    $text-color:contrast-color($default-palette, 'primary', 900);
    $background-color: color($default-palette, "primary", 900);
    $border-yellow: #f2c43c;

Create custom theme

다음으로 우리는 grid-theme 우리를 통과 text-color, background-color 그리고 border-yellow 변수 $cell-selected-text-color, $cell-selected-background 그리고 $cell-active-border-color, 각각:

$custom-grid-theme: grid-theme(
    $cell-selected-text-color: $text-color,
    $cell-active-border-color: $border-yellow,
    $cell-selected-background: $background-color
);

Apply theme

그런 다음 구성 요소 스타일(앱 스타일에도 포함될 수 있음)에 믹스인을 포함시켜 igx-hierarchical-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하기만 하면 됩니다.

    @include grid($custom-grid-theme);

Note

구성 요소가 Emulated ViewEncapsulation 사용하는 경우::ng-deep 사용하여 이 캡슐화를 침투해야 합니다. 애플리케이션에 있을 수 있는 다른 그리드에 영향을 주지 않도록:host 선택기 아래에서 스타일 범위를 지정합니다.

   :host {
       ::ng-deep {
           @include grid($custom-grid-theme);
       }
   }

사용자 정의 테마를 적용하면 선택한 그리드 셀이 선택한 색상으로 강조 표시됩니다.

Demo

Note

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

API References

• IgxHierarchicalGridComponent API
• IgxGridRow API
• IgxGridCell API
• IgxHierarchicalGridComponent Styles

Additional Resources

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

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

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