Angular Hierarchical Grid Column Hiding

Ignite UI for Angular 계층적 그리드는 사용자가 사용자 인터페이스를 통해 직접 또는 Angular 컴포넌트를 사용하여 열 숨기기를 수행할 수 있도록 합니다IgxColumnActionsComponentIgxColumnHidingDirective. Material UI Grid에는 Hierarchical Grid의 툴바를 통해 열의 가시 상태를 변경할 수 있는 내장 열을 숨기는 UI가 있습니다. 또한 개발자는 언제든지 열을 숨기는 UI를 별도의 컴포넌트로 정의하고 페이지 어디에나 배치할 수 있습니다.

Angular Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

계층적 그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.

<igx-hierarchical-grid class="hgrid" [data]="localdata"
        [height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>

    <igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column field="Photo">
        <ng-template igxCell let-cell="cell">
            <div class="cell__inner_2">
                <img [src]="cell.value" class="photo" />
            </div>
        </ng-template>
    </igx-column>
    <igx-column field="Debut" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Nominations" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Awards" [sortable]="true"></igx-column>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
        <igx-column field="Album" [sortable]="true"></igx-column>
        <igx-column field="Launch Date" [sortable]="true"></igx-column>
        <igx-column field="Billboard Review" [sortable]="true"></igx-column>
        <igx-column field="US Billboard 200" [sortable]="true"></igx-column>
        <igx-row-island [key]="'Songs'" [autoGenerate]="false">
            <igx-column field="No."></igx-column>
            <igx-column field="Title"></igx-column>
            <igx-column field="Released"></igx-column>
            <igx-column field="Genre"></igx-column>
        </igx-row-island>
    </igx-row-island>

    <igx-row-island [key]="'Tours'" [autoGenerate]="false">
        <igx-column field="Tour"></igx-column>
        <igx-column field="Started on"></igx-column>
        <igx-column field="Location"></igx-column>
        <igx-column field="Headliner"></igx-column>
    </igx-row-island>

</igx-hierarchical-grid>

Toolbar's Column Hiding UI

내장된 컬럼 숨기기 UI는 계층 그리드의 툴바 내에IgxDropDownComponent 위치합니다. 이 드롭다운을 사용해 열을 숨기기 UI를 보여주거나 숨길 수 있습니다. 이 목적을 위해 우리는 계층 격자의 내부와 를 모두 설정IgxGridToolbarActionsComponentIgxGridToolbarHidingComponent 하기만 하면 됩니다. 또한 Hierarchical Grid 래퍼에 와 맞춤 스타일을 사용하여IgxGridToolbarTitleComponent 툴바에 제목을 추가할 예정입니다.

<!--columnHiding.component.html-->
<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    ...
 </igx-hierarchical-grid>
</div>

/* columnHiding.component.css */
.photo {
    vertical-align: middle;
    max-height: 62px;
}
.cell__inner_2 {
    margin: 1px
}

계층적 그리드는 툴바의 열 숨기기 UI를 사용할 때 유용한 특성을 제공합니다. 속성을 사용igx-grid-toolbar-hiding title 해 툴바의 드롭다운 버튼 안에 표시되는 제목을 설정할 수 있습니다.

<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
 </igx-hierarchical-grid>
</div>

IgxGridToolbarHidingComponent의 속성을 사용columnsAreaMaxHeight 해 열 동작이 포함된 영역의 최대 높이를 설정할 수 있습니다. 이렇게 하면 많은 액션이 있고 모두 컨테이너에 들어가지 못하면 스크롤바가 나타나 원하는 액션으로 스크롤할 수 있습니다.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

열 숨기기 UI의 확장 기능 집합을 사용하려면 IgxColumnActionsComponent의columnsAreaMaxHeight 속성을 사용할 수 있습니다. 이렇게 하면 저희 애플리케이션의 요구사항에 맞게 사용할 수 있습니다.

이 문서의 시작 부분에 있는 Angular 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.

스타일링

열 작업 구성 요소의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.

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

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

가장 단순한 방법을 사용해 새로운 주제를 만들어column-actions-theme 그리고 다음을 받아들입니다.$title-color 그리고$background-color 매개변수.

$custom-column-actions-theme: column-actions-theme(
  $background-color: #292826,
  $title-color: #ffcd0f
);

보시다시피,column-actions-theme 컬럼 액션 컨테이너의 색상만 제어하며, 버튼, 체크박스, 입력 그룹에는 영향을 주지 않습니다. 버튼 스타일도 맞추고 싶으니 새 버튼 테마를 만들겠습니다:

$custom-button: button-theme(
  $foreground: #292826, 
  $disabled-foreground: rgba(255, 255, 255, .54)
);

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

이 예시에서는 플랫 버튼의 텍스트 색상과 버튼 색상만 변경했지만,button-theme 버튼 스타일을 제어할 수 있는 매개변수가 훨씬 더 많아졌습니다.

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.

@include css-vars($custom-column-actions-theme);

.igx-column-actions {
  @include css-vars($custom-button);
}

Note

생성된 버튼 테마.igx-column-actions를 포함하여, 열에 숨기는 버튼만 스타일링할 수 있습니다. 그렇지 않으면 그리드 내 다른 버튼들도 영향을 받을 수 있습니다.

Note

만약 컴포넌트가 뷰 캡슐화를Emulated 사용한다면, 컬럼 액션 컴포넌트 내 컴포넌트들(버튼, 체크박스 등)에 대해 이 캡슐화penetrate를::ng-deep 사용해야 합니다. 등):

@include css-vars($custom-column-actions-theme);

:host {
  ::ng-deep {
    .igx-column-actions {
      @include css-vars($custom-button);
    }
  }
}