Hierarchical Grid 행 선택

    Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 박스가 있습니다. 사용자가 체크 박스를 클릭하면 행을 선택하거나 선택 취소할 수 있고 사용자가 데이터를 포함한 복수의 행을 선택할 수 있습니다.

    데모

    설정

    단일 선택

    Hierarchical Grid의 단일 선택은 Hierarchical Grid의 selected 이벤트를 사용하여 간단하게 설정할 수 있습니다. 이 이벤트는 셀 컴포넌트에 대한 참조를 내보냅니다. 셀 컴포넌트에는 포함되는 행 컴포넌트에 대한 참조가 있습니다. 행 컴포넌트 참조의 key 게터를 사용하여 행(data[primaryKey] 또는 data 객체 자체를 사용하여)의 고유 식별자를 선택의 적절한 목록에 전달합니다. 단일 행만 항상 선택되도록 하기 위해 선택 행 선택 목록을 미리 비웁니다(selectRows 메소드 호출의 두 번째 인수):

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" [rowSelectable]="selection"
        (selected)="handleRowSelection($event)" #hierarchicalGrid>
    ...
</igx-hierarchical-grid>

    /* selectionExample.component.ts */

    public handleRowSelection(event) {
        const targetCell = event.cell;
        if (!this.selection) {
            this.hGrid.deselectAllRows();
            this.hGrid.selectRows([targetCell.row.key]);
        }
    }

    복수 선택

    복수 행 선택을 사용하도록 하기 위해 igx-hierarchical-grid의 rowSelectable 속성을 사용합니다. rowSelectable을 true로 설정하면 각 행 및 Hierarchical Grid 헤더에서 체크 박스 필드를 선택할 수 있게 됩니다. 체크 박스를 사용하여 복수의 행을 선택할 수 있으며 스크롤, 페이징 및 정렬 및 필터링 등의 데이터 조작을 통해 선택이 유지됩니다.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" [rowSelectable]="selection"
        (selected)="handleRowSelection($event)" #hierarchicalGrid>
    ...
</igx-hierarchical-grid>

    /* selectionExample.component.ts */

public selection = true;

    참고: 적절한 행 선택 및 셀 선택을 위해 Hierarchical Grid가 원격 가상화를 실행하는 동안 primaryKey를 제공해야 합니다.

    참고: 필터링이 설정된 경우, selectAllRows() 및 deselectAllRows()는 필터링된 모든 행을 선택/선택 취소합니다.

    참고: Hierarchical Grid에 원격 가상화가 설정된 경우, 헤더 체크 박스를 클릭하면 모든 레코드가 선택/선택 취소됩니다. 그러나, 헤더 체크 박스를 통해 모든 레코드가 선택된 후 가시적인 행이 선택 해제된 경우, 필요에 따라 새로운 데이터가 Hierarchical Grid에 로딩되면 새롭게 로드된 행이 선택되지 않는 제한이 있습니다.

    참고: 셀 선택은 rowSelectionChanging가 아닌 selected이 트리거됩니다.

    코드 조각

    프로그래밍 방식으로 행을 선택

    다음의 코드 예제를 사용하여 단일 또는 복수 행을 동시에 선택할 수 있습니다(primaryKey를 사용하여):

    <!-- selectionExample.component.html -->

<igx-hierarchical-grid ... [primaryKey]="'artist'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.selectRows([1,2,5])">Select 1,2 and 5</button>

    이렇게 하면 ID 1, 2 및 5가 있는 데이터 항목에 해당하는 행을 Hierarchical Grid 선택에 추가할 수 있습니다.

    선택 이벤트 취소

    <!-- selectionExample.component.html -->

<igx-hierarchical-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-hierarchical-grid>

    /* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.newSelection = args.oldSelection; // overwrites the new selection, making it so that no new row(s) are entered in the selectionAPI
    args.checked = false; // overwrites the checkbox state
}

    API 참조

    추가 리소스

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