Angular 그리드 행 선택
Ignite UI for Angular의 행 선택에는 행 내의 다른 모든 열 앞에 행 선택기 열이 있습니다. 사용자가 행 선택기를 클릭하면 행이 선택되거나 선택 취소되어 사용자가 여러 데이터 행을 선택할 수 있습니다.
Angular Row Selection Example
아래 샘플은 세 가지 유형의 Grid 행 선택 동작을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다. 행 선택기 확인란을 숨기 거나 표시하려면 전환 버튼을 사용하세요.
새로 선택한 요소를 얻으려면 event.newSelection을 사용할 수 있습니다.
public handleRowSelection(event: IRowSelectionEventArgs) {
this.selectedRowsCount = event.newSelection.length;
this.selectedRowIndex = event.newSelection[0];
this.snackbarRowCount.open();
this.snackbar.close();
this.logAnEvent(`=> 'rowSelectionChanging' with value: ` + JSON.stringify(event.newSelection));
}
Setup
igx-grid에서 행 선택을 설정하려면 rowSelection 속성만 설정하면 됩니다. 이 속성은 GridSelectionMode 열거를 허용합니다. GridSelectionMode는 none, Single, Multiple의 세 가지 모드를 제공합니다. 아래에서는 각각에 대해 더 자세히 살펴보겠습니다.
None Selection
igx-grid 에서는 기본적으로 행 선택이 비활성화되어 있습니다. 그렇지 않으면 ([rowSelection]="'none'") 입니다. 따라서 그리드 UI와의 상호작용을 통해 행을 선택하거나 선택 취소할 수 없으며, 이러한 작업을 완료하는 유일한 방법은 제공된 API 메서드를 사용하는 것입니다.
Single Selection
이제 단일 행 선택을 쉽게 설정할 수 있습니다. [rowSelection] = '"single"' 속성을 설정하기만 하면 됩니다. 이렇게 하면 그리드 내에서 행을 하나만 선택할 수 있습니다. 행의 셀에 포커스를 두고 셀을 클릭하거나 스페이스 키를 눌러 행을 선택할 수 있으며, 물론 행 선택기 필드를 클릭하여 행을 선택할 수도 있습니다. 행이 선택되거나 선택 취소되면 rowSelectionChanging 이벤트가 발생합니다.
<!-- selectionExample.component.html -->
<igx-grid [data]="remote | async" [rowSelection]="'single'" [autoGenerate]="true"
(rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
</igx-grid>
/* selectionExample.component.ts */
public handleRowSelection(args) {
if (args.added.length && args.added[0] === 3) {
args.cancel = true;
}
}
Multiple Selection
igx-grid에서 여러 행 선택을 활성화하려면 rowSelection 속성을 multiple로 설정하면 됩니다. 이렇게 하면 각 행과 표 헤더에서 행 선택기 필드가 활성화됩니다. 행 선택기를 사용하면 사용자는 스크롤, 페이징, 정렬 및 필터링과 같은 데이터 작업을 통해 선택 항목이 유지되는 여러 행을 선택할 수 있습니다. 셀을 클릭하거나 셀에 초점이 맞춰진 상태에서 스페이스 키를 눌러 행을 선택할 수도 있습니다. 한 행을 선택하고 Shift 키를 누른 채 다른 행을 클릭하면 전체 행 범위가 선택됩니다. 이 선택 모드에서는 단일 행을 클릭하면 이전에 선택한 행이 선택 취소됩니다. Ctrl 키를 누른 상태에서 클릭하면 행이 전환되고 이전 선택이 유지됩니다.
<!-- selectionExample.component.html -->
<igx-grid [data]="remote | async" [primaryKey]="'ProductID'" [rowSelection]="'multiple'"
(rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true" [autoGenerate]="true">
</igx-grid>
<!-- selectionExample.component.ts -->
public handleRowSelection(event: IRowSelectionEventArgs) {
// use event.newSelection to retrieve primary key/row data of latest selected row
this.selectedRowsCount = event.newSelection.length;
this.selectedRowIndex = event.newSelection[0];
}
노트
적절한 행 선택 및 셀 선택을 위해서는 Grid가 원격 가상화를 수행하는 동안
primaryKey제공되어야 합니다.그리드에 원격 가상화가 있는 경우 헤더 확인란을 클릭하면 현재 그리드에 있는 모든 레코드가 선택/선택 취소됩니다. 요청 시 그리드에 새 데이터가 로드되면 새로 추가된 행은 선택되지 않으며 이는 제한 사항이므로 해당 동작을 직접 처리해야 하며 제공된 API 메소드를 사용하여 해당 행을 선택할 수 있습니다.
행 선택은
rowSelectionChanging이벤트를 트리거합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 및 제거된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소 가능 하므로 선택을 방지할 수 있습니다.행 선택이 활성화되면 행 선택기가 표시되지만 표시하지 않으려면
[hideRowSelectors] = true설정할 수 있습니다.런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.
API usage
Select rows programmatically
아래 코드 조각은 (primaryKey 통해) 하나 또는 여러 행을 동시에 선택하는 데 사용할 수 있습니다. 또한 이 메서드의 두 번째 매개 변수는 이전 행 선택을 지울지 여부를 선택할 수 있는 부울 속성입니다. 이전 선택 사항은 기본적으로 유지됩니다.
<!-- selectionExample.component.html -->
<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button> // select rows and clear previous selection state
그러면 ID 1, 2, 5의 데이터 항목에 해당하는 행이 그리드 선택 항목에 추가됩니다.
Deselect rows
프로그래밍 방식으로 행 선택을 취소해야 하는 경우 deselectRows(rowIds: []) 메서드를 사용할 수 있습니다.
<!-- selectionExample.component.html -->
<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>
Row selection event
행 선택에 일부 변경이 있으면 rowSelectionChanging 이벤트가 발생합니다. rowSelectionChanging 다음 인수를 노출합니다.
oldSelection- 행 선택의 이전 상태를 포함하는 행 데이터의 배열입니다.newSelection- 행 선택의 새 상태와 일치하는 행 데이터의 배열입니다.added- 현재 선택 항목에 추가된 행 데이터의 배열입니다.removed- 이전 선택 상태에 따라 현재 제거된 행 데이터의 배열입니다.event- 행 선택 변경을 트리거한 원래 이벤트입니다.cancel- 행 선택 변경을 방지할 수 있습니다.
원격 데이터 시나리오의 행 선택 이벤트
원격 데이터 시나리오에서 그리드에 primaryKey 설정된 경우 rowSelectionChanging.oldSelection 이벤트 인수에는 현재 데이터 보기에 없는 행에 대한 전체 행 데이터 개체가 포함되지 않습니다. 이 경우 rowSelectionChanging.oldSelection 객체에는 primaryKey 필드인 하나의 속성만 포함됩니다. 현재 데이터 보기에 있는 나머지 행의 경우 rowSelectionChanging.oldSelection 전체 행 데이터가 포함됩니다.
<!-- selectionExample.component.html -->
<igx-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-grid>
/* selectionExample.component.ts */
public handleRowSelectionChange(args) {
args.cancel = true; // this will cancel the row selection
}
Select all rows
igx-grid가 제공하는 또 다른 유용한 API 방법은 selectAll(onlyFilteredData) 입니다. 기본적으로 이 방법은 모든 데이터 행을 선택하지만 필터링이 적용되면 필터 기준과 일치하는 행만 선택됩니다. 그러나 false 매개변수로 메소드를 호출하면 selectAll(false) 필터링이 적용되더라도 항상 그리드의 모든 데이터를 선택합니다.
Note
selectAll() 삭제된 행을 선택하지 않는다는 점에 유의하세요.
Deselect all rows
igx-grid 기본적으로 모든 데이터 행을 선택 취소하지만 필터링이 적용되면 필터 기준과 일치하는 행만 선택 취소하는 deselectAll(onlyFilteredData) 메소드를 제공합니다. 그러나 false 매개변수로 메소드를 호출하면 deselectAll(false) 필터링이 적용되어도 항상 모든 행 선택 상태를 지웁니다.
How to get selected rows
현재 선택된 행을 확인해야 하는 경우 selectedRows getter를 사용하여 해당 행 ID를 얻을 수 있습니다.
public getSelectedRows() {
const currentSelection = this.grid.selectedRows; // return array of row IDs
}
또한 selectedRows에 행 ID를 할당하면 그리드의 선택 상태를 변경할 수 있습니다.
public mySelectedRows = [1, 2, 3]; // an array of row IDs
<igx-grid primaryKey="ProductID" rowSelection="multiple" [autoGenerate]="false" [mySelectedRows]="selectedRows" [data]="data">
<igx-column [field]="'ProductID'"></igx-column>
<igx-column [field]="'ProductName'"></igx-column>
<igx-column [field]="'UnitsInStock'"></igx-column>
</igx-grid>
Row selector templates
그리드에서 헤더 및 행 선택기를 템플릿화할 수 있으며 다양한 시나리오에 유용한 기능을 제공하는 해당 컨텍스트에 액세스할 수도 있습니다.
기본적으로 그리드는 행 선택기의 상위 컨테이너 또는 행 자체에서 모든 행 선택 상호 작용을 처리 하고 템플릿에 대한 상태 시각화만 남겨 둡니다. 기본 기능 재정의는 일반적으로 rowSelectionChanging 이벤트를 사용하여 수행되어야 합니다. 기본 기능을 재정의하는 click 핸들러로 사용자 정의 템플릿을 구현하는 경우 올바른 행 상태를 유지하기 위해 이벤트 전파를 중지해야 합니다.
행 템플릿
사용자 정의 행 선택기 템플릿을 생성하려면 igx-grid 내에서 igxRowSelector 지시문을 사용하여 <ng-template>을 선언하세요. 템플릿에서 행 상태에 대한 정보를 제공하는 속성을 사용하여 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있습니다.
selected 속성은 현재 행이 선택되었는지 여부를 나타내며, index 속성은 행 인덱스에 액세스하는 데 사용할 수 있습니다.
<ng-template igxRowSelector let-rowContext>
{{ rowContext.index }}
<igx-checkbox
[checked]="rowContext.selected"
[readonly]="true"
></igx-checkbox>
</ng-template>
rowID 속성을 사용하여 igx-grid 행의 참조를 가져올 수 있습니다. 이는 행 선택기 요소에 click 핸들러를 구현할 때 유용합니다.
<ng-template igxRowSelector let-rowContext>
<igx-checkbox (click)="onSelectorClick($event, rowContext.key)"></igx-checkbox>
</ng-template>
위의 예에서는 igx-checkbox 사용하고 있으며 rowContext.selected 해당 checked 속성에 바인딩합니다. Row Numbering Demo에서 이를 실제로 확인하세요.
Header template
사용자 정의 헤더 선택기 템플릿을 생성하려면 그리드 내에서 igxHeadSelector 지시문을 사용하여 <ng-template>을 선언하세요. 템플릿에서 헤더 상태에 대한 정보를 제공하는 속성을 사용하여 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있습니다.
selectedCount 속성은 현재 선택된 행 수를 표시하고 totalCount 그리드에 총 행 수를 표시합니다.
<ng-template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
</ng-template>
selectedCount 및 totalCount 속성을 사용하여 헤드 선택기를 선택해야 하는지 또는 불확정(부분 선택)해야 하는지 결정할 수 있습니다.
<igx-grid [data]="gridData" primaryKey="ProductID" rowSelection="multiple">
<!-- ... -->
<ng-template igxHeadSelector let-headContext>
<igx-checkbox
[checked]=" headContext.selectedCount > 0 && headContext.selectedCount === headContext.totalCount"
[indeterminate]="headContext.selectedCount > 0 && headContext.selectedCount !== headContext.totalCount">
</igx-checkbox>
</ng-template>
</igx-grid>
Row Numbering Demo
이 데모에서는 사용자 정의 헤더 및 행 선택기의 사용법을 보여줍니다. 후자는 rowContext.index 사용하여 행 번호와 rowContext.selected에 바인딩된 igx-checkbox 표시합니다.
Excel Style Row Selectors Demo
이 데모에서는 Excel과 유사한 헤더 및 행 선택기와 유사한 사용자 지정 템플릿을 사용합니다.
Conditional Selection Demo
이 데모에서는 rowSelectionChanging 이벤트와 선택 불가능한 행에 대한 확인란이 비활성화된 사용자 정의 템플릿을 사용하여 일부 행이 선택되는 것을 방지합니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub