Angular Hierarchical Grid Column Hiding

Ignite UI for Angular 사용자가 사용자 인터페이스를 통해 직접 또는 Angular 구성 요소를 사용하여 열 숨기기를 수행할 수 있도록 하는 IgxColumnHidingDirective와 함께 IgxColumnActionsComponent를 제공합니다. 머티리얼 UI 그리드에는 계층형 그리드의 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있는 열 숨김 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를 표시하거나 숨길 수 있습니다. 이를 위해 우리가 해야 할 일은 Hierarchical Grid 내부에 IgxGridToolbarActionsComponent와 IgxGridToolbarHidingComponent 모두 설정하는 것뿐입니다. 또한 IgxGridToolbarTitleComponent와 Hierarchical Grid 래퍼의 사용자 정의 스타일을 사용하여 도구 모음에 제목을 추가하겠습니다.

<!--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: steelblue,
    $title-color: gold
);

보시다시피, column-actions-theme 열 작업 컨테이너의 색상만 제어하지만 그 안에 있는 버튼, 확인란 및 입력 그룹에는 영향을 미치지 않습니다. 버튼에도 스타일을 지정하고 싶으므로 새 버튼 테마를 생성하겠습니다.

$custom-button: button-theme($flat-text-color: gold, $disabled-color: black);

이 예에서는 플랫 버튼의 텍스트 색상과 버튼 비활성화 색상만 변경했지만 button-theme 버튼 스타일을 제어할 수 있는 훨씬 더 많은 매개변수를 제공합니다.

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

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

Note

우리는 범위를 지정합니다 igx 버튼 안에서 섞는다.igx-column-actions, 열 숨김 버튼에만 스타일이 지정됩니다. 그렇지 않으면 그리드의 다른 버튼도 영향을 받습니다.

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

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

Defining a color palette

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$yellow-color: gold;
$blue-color: steelblue;

$custom-palette: palette($primary: $blue-color, $secondary: $yellow-color);

그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$custom-column-actions-theme: column-actions-theme(
    $palette: $custom-palette,
    $title-color: color($custom-palette, "secondary", 400),
    $background-color: color($custom-palette, "primary", 200)
);

$custom-button: button-theme(
    $palette: $custom-palette,
    $flat-text-color: color($custom-palette, "secondary", 400),
    $disabled-color: black
);

Note

igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using Schemas

테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

// Extending the dark column actions schema
$custom-column-actions-schema: extend($_dark-column-actions,
    (
        title-color:(
           color: ("secondary", 400)
        ),
        background-color:(
           color: ("primary", 200)
        )
    )
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
    (           
        flat-text-color:(
           color:("secondary", 500)
        ),
        disabled-color:(
           color:("primary", 700)
        )
    )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-column-actions: $custom-column-actions-schema,
    igx-button: $custom-button-schema
));

// Defining column-actions-theme with the global dark schema
$custom-column-actions-theme: column-actions-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$custom-button: button-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.