Angular 계층형 그리드 행 선택

Ignite UI for Angular에서 행 선택을 사용하면 행 내의 다른 모든 열보다 선행하는 행 선택기 열이 있습니다. 사용자가 행 선택기를 클릭하면 행이 선택되거나 선택 해제되어 사용자가 여러 행의 데이터를 선택할 수 있습니다.

Angular Row Selection Example

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

Setup

In order to setup row selection in the igx-hierarchical-grid, you just need to set the rowSelection property. This property accepts GridSelectionMode enumeration. GridSelectionMode exposes the following three modes: none, single and multiple. Below we will take a look at each of them in more detail.

None Selection

In the igx-hierarchical-grid by default row selection is disabled, otherwise ([rowSelection]="'none'"). So you can not select or deselect a row through interaction with the Hierarchical Grid UI, the only way to complete these actions is to use the provided API methods.

Single Selection

Single row selection can now be easily set up, the only thing you need to do, is to set [rowSelection] = '"single"' property. This gives you the opportunity to select only one row within a grid. You can select a row by clicking on a cell or pressing the space key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected rowSelectionChanging event is emitted.

<igx-hierarchical-grid [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

/* selectionExample.component.ts */

public handleRowSelection(event) {
    if (args.added.lenght && args.added[0] === 3) {
        args.cancel = true;
    }
}

Multiple Selection

To enable multiple row selection in the igx-hierarchical-grid just set the rowSelection property to multiple. This will enable a row selector field on each row and in the Hierarchical Grid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the space key when a cell is focused. If you have selected one row and click on another while holding the shift key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you click while holding the ctrl key, the row will be toggled and the previous selection will be preserved.

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-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];
 }

노트

• In order to have proper row selection and cell selection, while Hierarchical Grid has remote virtualization, a primaryKey should be provided.

• 계층적 그리드에 원격 가상화가 있는 경우 헤더 확인란을 클릭하면 현재 그리드에 있는 모든 레코드가 선택/선택 취소됩니다. 요청 시 계층적 그리드에 새 데이터가 로드되면 새로 추가된 행은 선택되지 않으며 이는 제한 사항이므로 해당 동작을 직접 처리해야 하며 제공된 API 메서드를 사용하여 이러한 행을 선택할 수 있습니다.

• Row selection will trigger rowSelectionChanging event. This event gives you information about the new selection, old selection, the rows that have been added and removed from the old selection. Also the event is cancellable, so this allows you to prevent selection.

• When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set [hideRowSelectors] = true.

• 런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.

API usage

Select rows programmatically

The code snippet below can be used to select one or multiple rows simultaneously (via primaryKey); Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default.

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

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

이렇게 하면 ID 1, 2, 5의 데이터 항목에 해당하는 행이 계층적 그리드 선택에 추가됩니다.

Deselect rows

If you need to deselect rows programmatically, you can use the deselectRows(rowIds: []) method.

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

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

Row selection event

When there is some change in the row selection rowSelectionChanging event is emitted. rowSelectionChanging exposes the following arguments:

• oldSelection - array of row's data that contains the previous state of the row selection.

• newSelection - array of row's data that match the new state of the row selection.

• added - array of row's data that are currently added to the selection.

• removed - array of row's data that are currently removed according old selection state.

• event - the original event that triggered row selection change.

• cancel - allows you the prevent the row selection change.

• owner - if the event is triggered from a child grid, this will give you a reference to the component, from which the event is emitted.

원격 데이터 시나리오의 행 선택 이벤트

원격 데이터 시나리오에서는 격자primaryKey에 set,eventrowSelectionChanging.oldSelection 인자가 현재 데이터 뷰 밖에 있는 행의 전체 행 데이터 객체를 포함하지 않습니다. 이 경우 객체는rowSelectionChanging.oldSelection 필드 속성 중 하나primaryKey만 포함합니다. 나머지 행들은 현재 데이터 뷰에 위치해 있으며,rowSelectionChanging.oldSelection 전체 행 데이터를 포함하게 됩니다.

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

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

/* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.cancel = true; // this will cancel the row selection
}

Select all rows

Another useful API method that igx-hierarchical-grid provides is selectAll(onlyFilteredData). By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. But if you call the method with false parameter, selectAll(false) will always select all data in the grid, even if filtering is applied.

Note

Keep in mind that selectAll() will not select the rows that are deleted.

Deselect all rows

igx-hierarchical-grid provides deselectAll(onlyFilteredData) method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. But if you call the method with false parameter, deselectAll(false) will always clear all row selection state even if filtering is applied.

How to get selected rows

If you need to see which rows are currently selected, you can get their row IDs with the selectedRows getter.

public getSelectedRows() {
    const currentSelection = this.hierarchicalGrid.selectedRows; // return array of row IDs
}

Additionally, assigning row IDs to selectedRows will allow you to change the grid's selection state.

// arrays of row IDs
public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri'];
public childSelectedRows = ['Initiation', 'Emergency'];

<igx-hierarchical-grid primaryKey="Artist" rowSelection="multiple" [autoGenerate]="false" [selectedRows]="mySelectedRows" [data]="data">
    <igx-column field="Artist"></igx-column>
    <igx-row-island [key]="'Albums'" rowSelection="multiple">
        <igx-column field="Album"></igx-column>
        <igx-column field="LaunchDate"></igx-column>
    </igx-row-island>
</igx-hierarchical-grid>

Row selector templates

계층적 그리드에서 헤더 및 행 선택기를 템플릿화할 수 있으며 다양한 시나리오에 유용한 기능을 제공하는 해당 컨텍스트에 액세스할 수도 있습니다.

By default, the Hierarchical Grid handles all row selection interactions on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the rowSelectionChanging event. In case you implement a custom template with a click handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state.

행 템플릿

To create a custom row selector template, within the igx-hierarchical-grid, declare an <ng-template> with igxRowSelector directive. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.

The selected property shows whether the current row is selected or not while the index property can be used to access the row index.

<ng-template igxRowSelector let-rowContext>
    {{ rowContext.index }}
    <igx-checkbox
        [checked]="rowContext.selected"
        [readonly]="true"
    ></igx-checkbox>
</ng-template>

The rowID property can be used to get a reference of an igx-hierarchical-grid row. This is useful when you implement a click handler on the row selector element.

<ng-template igxRowSelector let-rowContext>
    <igx-checkbox (click)="onSelectorClick($event, rowContext.key)"></igx-checkbox>
</ng-template>

In the above example we are using an igx-checkbox and we bind rowContext.selected to its checked property. See this in action in our Row Numbering Demo.

Note

The rowContext.select() and rowContext.deselect() methods are exposed in the template context of an igx-hierarchical-grid. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality.

Header template

To create a custom header selector template, within the Hierarchical Grid, declare an <ng-template> with igxHeadSelector directive. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state.

The selectedCount property shows you how many rows are currently selected while totalCount shows you how many rows there are in the Hierarchical Grid in total.

<ng-template igxHeadSelector let-headContext>
    {{ headContext.selectedCount }} / {{ headContext.totalCount  }}
</ng-template>

The selectedCount and totalCount properties can be used to determine if the head selector should be checked or indeterminate (partially selected).

<igx-hierarchical-grid [data]="hGridData" primaryKey="ProductID">
    <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-row-island [key]="'ProductInfo'">
        <ng-template igxHeadSelector let-childHeadContext>
            <!-- header template goes here -->
        </ng-template>
        <ng-template igxRowSelector let-childRowContext>
            <!-- row template goes here -->
        </ng-template>
    </igx-row-island>
</igx-hierarchical-grid>

Each hierarchy level in an igx-hierarchical-grid can have its own row and header templating.

Note

The headContext.selectAll() and headContext.deselectAll() methods are exposed in the template context of an igx-hierarchical-grid. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality.

Row Numbering Demo

This demo shows the usage of custom header and row selectors. The latter uses rowContext.index to display row numbers and an igx-checkbox bound to rowContext.selected.

Conditional Selection Demo

This demo prevents some rows from being selected using the rowSelectionChanging event and a custom template with disabled checkbox for non-selectable rows.

API References

• IgxHierarchicalGridComponent API_IgxGridRow API
• IgxGridCell API
• IgxHierarchicalGridComponent Styles

Additional Resources

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

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

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