Angular 계층형 그리드 행 고정

    One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. Row Pinning in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Hierarchical Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an igxActionStrip component in the context of Hierarchical Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

    Angular Hierarchical Grid Row Pinning Example

    Row Pinning UI

    The built-in row pinning UI is enabled by adding an igxActionStrip component with the GridPinningActions component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well.

    <igx-hierarchical-grid [data]="data" [autoGenerate]="false">
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-hierarchical-grid>

    Row Pinning API

    Row pinning is controlled through the pinned input of the row. Pinned rows are rendered at the top of the Hierarchical Grid by default and stay fixed through vertical scrolling of the unpinned rows in the Hierarchical Grid body.

    this.hierarchicalGrid.getRowByIndex(0).pinned = true;

    You may also use the Hierarchical Grid's pinRow or unpinRow methods of the IgxHierarchicalGridComponent to pin or unpin records by their ID:

    this.hierarchicalGrid.pinRow('ALFKI');
this.hierarchicalGrid.unpinRow('ALFKI');

    행 ID는 그리드의 주요primaryKey 키 값, 즉 레코드 인스턴스 자체에 의해 정의된다는 점에 유의하세요. 두 메서드 모두 해당 연산이 성공했는지 여부를 나타내는 불리언 값을 반환합니다. 보통 실패하는 이유는 행이 이미 원하는 상태에 있기 때문입니다.

    A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the rowPinning event and changing the insertAtIndex property of the event arguments to the desired position index.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true" (rowPinning)="rowPinning($event)">
</igx-hierarchical-grid>

    public rowPinning(event) {
    event.insertAtIndex = 0;
}

    Pinning Position

    설정 옵션을 통해pinning 행 고정 위치를 변경할 수 있습니다. 핀 영역 위치를 상단 또는 하단으로 설정할 수 있습니다. 아래쪽으로 설정하면 고정되지 않은 행 다음, 그리드 하단에 렌더링됩니다. 고정되지 않은 행은 세로로 스크롤할 수 있고, 고정된 행은 하단에 고정되어 있습니다.

    <igx-hierarchical-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-hierarchical-grid>

    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };

    Custom Row Pinning UI

    사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.

    Via extra column with icon

    액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.

    <igx-hierarchical-grid [data]="localdata" [autoGenerate]="false">
    <igx-column width='70px' [filterable]='false'>
        <ng-template igxCell let-cell="cell" let-val>
            <igx-icon class="pin-icon" (mousedown)="togglePinning(cell.row, $event)">
                {{cell.row.pinned ? 'lock' : 'lock_open'}}
            </igx-icon>
        </ng-template>
    </igx-column>
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>
    <igx-row-island [key]="'Orders'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>

    사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.

    public togglePinning(row: IgxGridRow, event) {
    event.preventDefault();
    if (row.pinned) {
        row.unpin();
    } else {
        row.pin();
    }
}

    데모

    Row Pinning Limitations

    • 데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
    • 행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
    • 고정된 행이 그리드의 고정된 영역과 고정 해제된 영역 모두에 나타날 수 있도록 내부적으로 저장되는 방식으로 인해 그리드의 레코드를 요청 시 원격 끝점에서 가져올 때(원격 가상화) 행 고정이 지원되지 않습니다.
    • 그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
    • 행 선택은 전적으로 행 ID와 함께 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: Shift + 클릭 사용)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.
    • 그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:
      • 행 선택
      • 행 확장/축소
      • 행 편집
      • 행 고정

    스타일링

    The IgxHierarchicalGrid allows styling through the Ignite UI for Angular Theme Library. The Hierarchical Grid's grid-theme exposes a wide variety of properties, which allow the customization of all the features of the Hierarchical Grid.

    아래에서는 계층형 그리드의 행 고정 스타일을 사용자 지정하는 단계를 살펴보겠습니다.

    Importing the Styling Library

    To begin the customization of the row pinning feature, you need to import the index file, where all styling functions and mixins are located.

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

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

    Defining a Theme

    Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the row pinning feature as desired.

    $custom-grid-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);

    Using CSS variables

    마지막 단계는 사용자 정의 그리드 테마를 전달하는 것입니다.

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

    데모

    Note

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

    API References

    Additional Resources

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