Angular 셀 선택

선택 기능은 Material UI 기반의 트리 그리드에서 풍부한 데이터 선택 기능을 가능하게 합니다. 강력한 API와 사용하기 쉬운 메서드 덕분에 다양한 이벤트와 단일 선택 액션이 제공됩니다. 트리 그리드는 이제 셀 선택 모드를 세 가지 지원하며, 속성을 변경cellSelection 해 쉽게 전환할 수 있습니다. 셀 선택을 비활성화할 수 있고, 그리드 내에서 한 셀만 선택 하거나 여러 셀을 선택할 수 있는데, 이 옵션은 기본 옵션으로 제공됩니다. 하지만 각 옵션에 대해 더 깊이 살펴보겠습니다.

Angular Cell Selection Example

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

Selection types

Tree Grid Multiple-cell Selection

셀을 선택하는 방법:

• ByMouse drag- 셀의 직사각형 데이터 선택이 수행됩니다.
• +Ctrl key-를 누르면Mouse drag 여러 범위 선택이 수행됩니다. 기존의 다른 세포 선택은 유지됩니다.
• Shift 키를 사용해 즉시 다중 셀 선택을 할 수 있습니다. Shift 키를 누른 채로 한 칸을 선택하고 다른 칸을 선택하세요. 두 셀 사이의 셀 범위가 선택됩니다. 두 번째 셀을 누르고 있을Shift key 때 선택된 셀 범위는 첫 번째 셀 위치(시작점)에 따라 업데이트된다는 점을 유념하세요.
• 키를 누르고Arrow keys 있는 동안 멀티셀을 선택하는Shift key 키보드 기능. 집중된 셀을 기준으로 다중 셀 선택 범위를 생성할 것입니다.
• 그리고Ctrl + Arrow keys 키를 누른Ctrl + Home/End 상태에서Shift key 키보드로 멀티셀 선택을 할 수 있습니다. 집중된 셀을 기준으로 다중 셀 선택 범위를 생성할 것입니다.
• 버튼을Left Mouse key 누르고Ctrl key 있는 상태로 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
• 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

데모

Tree Grid Single Selection

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

Note

단일 셀이 선택selected 되면 이벤트가 방출되며,selection mode이 또는single​multiple 다중 셀 선택 모드에서는 셀 범위를rangeSelected 선택하면 이벤트가 발생합니다.

Tree Grid None selection

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

Keyboard navigation interactions

While Shift key is pressed

• 현재 선택 항목에 위 셀을 추가하려면 Shift + 위쪽 화살표를 사용하세요.
• 현재 선택 항목에 아래 셀을 추가하려면 Shift + 아래쪽 화살표를 사용하세요.
• Shift + 왼쪽 화살표는 현재 선택 항목에 왼쪽 셀을 추가합니다.
• 현재 선택 항목에 오른쪽 셀을 추가하려면 Shift + 오른쪽 화살표를 사용하세요.

While Ctrl + Shift keys are pressed

• Ctrl + Shift + 위쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택합니다.
• Ctrl + Shift + 아래쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
• Ctrl + Shift + 왼쪽 화살표를 사용하여 행 시작 부분까지 모든 셀을 선택합니다.
• Ctrl + Shift + 오른쪽 화살표를 사용하여 행 끝까지 모든 셀을 선택합니다.
• Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
• Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.

Note

연속스크롤은 Grid의 Body 내에서만 가능합니다.

Api usage

다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.

Select range

selectRange(range)- API로 셀 범위를 선택합니다.rowStart 그리고rowEnd 행 인덱스를 사용해야 하며,columnStart 열columnEnd 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);

Note

선택 범위는 추가 연산입니다. 이전 선택은 지워지지 않습니다.

Clear cell selection

clearCellSelection()현재 셀 선택을 해제할 수 있습니다.

Get selected data

getSelectedData()선택된 데이터 배열을 선택에 따라 형식으로 반환합니다. 아래는 예시입니다:

1. 세 개의 서로 다른 단일 셀을 선택한 경우:

   expectedData = [
       { CompanyName: 'Infragistics' },
       { Name: 'Michael Langdon' },
       { ParentID: 147 }
   ];
   

2. 한 열에서 세 개의 셀을 선택한 경우:

   expectedData = [
       { Address: 'Obere Str. 57'},
       { Address: 'Avda. de la Constitución 2222'},
       { Address: 'Mataderos 2312'}
   ];
   

3. 행 1개, 열 3개에서 마우스 드래그로 셀 3개를 선택한 경우:

   expectedData = [
       { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
   ];
   

4. 2개의 행과 3개의 열에서 마우스 드래그로 3개의 셀을 선택한 경우:

   expectedData = [
       { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
       { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
   ];
   

5. 서로 다른 두 범위를 선택한 경우:

   expectedData = [
       { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
       { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
       { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
       { Address: 'Fauntleroy Circus', City: 'London'}
   ];
   

6. 두 개의 겹치는 범위를 선택한 경우 형식은 다음과 같습니다.

   expectedData = [
       { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
       { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
       { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
       { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
   ];
   

Note

selectedCells()그리드의 뷰포트에 있는 모든 가시행과 시야에서 벗어난 열을 포함한 모든 열에서 셀을 반환합니다.getSelectedData() 선택된 셀 데이터도 반환합니다.getSelectedRanges(): GridSelectionRange[] 키보드와 포인터 상호작용에서 현재 선택된 격자 범위를 반환합니다. 타입은 GridSelectionRange[입니다.

Features integration

다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).

• Sorting- 정렬이 실행될 때 선택이 해제되지 않습니다. 현재 선택된 셀들은 오름차순 또는 내리림순으로 정렬할 때 동일하게 유지됩니다.
• Paging- 페이징 시 선택된 셀이 삭제됩니다. 선택 기능은 페이지 전반에 걸쳐 지속되지 않습니다.
• Filtering- 필터링이 실행될 때 선택이 해제되지 않습니다. 필터링이 해제되면 처음 선택된 셀이 반환됩니다.
• Resizing- 열 크기 조정 시 선택된 셀은 지워지지 않습니다.
• Hiding- 선택된 셀을 지우지 않습니다. 컬럼이 숨겨져 있으면 다음에 보이는 컬럼의 셀들이 선택됩니다.
• Pinning- 선택된 셀은 삭제되지 않습니다. 숨는 것과 같아
• Group by- 컬럼 그룹화 시 선택된 셀은 지우지 않습니다.

스타일링

테마 엔진은 선택한 셀의 범위를 스타일링할 수 있는 속성을 노출합니다.

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

완료되면 와contrast-color 함수를color 활용할 수 있습니다. 이 색상들을 통해 선택 범위에 사용할 색상을 정의합니다:

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

Note

만약 andcontrast-color 함수를 사용하고color 싶지 않다면, 색상 값을 하드코딩할 수도 있습니다.

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-tree-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하는 것뿐입니다.

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

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

데모

Note

샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

API References

• IgxTreeGridComponent API_IgxTreeGridRow API
• IgxGridCell API
• IgxTreeGridComponent Styles

Additional Resources

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

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

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