Angular Hierarchical Grid Column Hiding

    Ignite UI for Angular Hierarchical Grid는 IgxColumnActionsComponent 사용자가 사용자 인터페이스를 통해 직접 또는 Angular 구성 요소를 사용하여 열 숨기기를 수행할 수 있는 항목을 IgxColumnHidingDirective 제공합니다. 머티리얼 UI 그리드에는 열 숨김 UI가 내장되어 있으며, 계층적 그리드의 툴바를 통해 열의 표시 상태를 변경하는 데 사용할 수 있습니다. 또한 개발자는 항상 열 숨김 UI를 별도의 구성 요소로 정의하고 페이지에서 원하는 위치에 배치할 수 있습니다.

    Angular 계층형 그리드 열 숨기기 예제

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    계층적 그리드 설정

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

    <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>
html

    툴바의 열 숨기기 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>
html
    /* columnHiding.component.css */
.photo {
    vertical-align: middle;
    max-height: 62px;
}
.cell__inner_2 {
    margin: 1px
}
css

    계층형 그리드는 도구 모음의 열 숨기기 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>
html

    IgxGridToolbarHidingComponent의 columnsAreaMaxHeight 속성을 사용하면 열 작업이 포함된 영역의 최대 높이를 설정할 수 있습니다. 이렇게 하면 작업이 많고 모든 작업이 컨테이너에 들어갈 수 없는 경우 스크롤바가 나타나 원하는 작업으로 스크롤할 수 있습니다.

    // columnHiding.component.ts

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

    열 숨김 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';
scss

    가장 간단한 접근 방식을 사용하여 column-actions-theme 확장하고 $title-color 및 $background-color 매개 변수를 허용하는 새 테마를 만듭니다.

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

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

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

    우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

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

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

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

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

    생성된 button-theme를 내부에.igx-column-actions 포함시켜 열 숨김 버튼만 스타일이 지정되도록 합니다. 그렇지 않으면 그리드의 다른 버튼도 영향을 받습니다.

    구성 요소가 를 사용하는 경우 Emulated ViewEncapsulation을 사용하려면 다음이 필요합니다. penetrate이 캡슐화는 다음을 사용합니다.::ng-deep Column Action 구성 요소 내부의 구성 요소(buttons, checkboxes ... 등):

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

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

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA 배너

    API 참조

    이 문서에서는 계층형 그리드의 도구 모음에서 UI를 숨기는 내장 열을 사용하는 방법을 배웠습니다.

    열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

    사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

    IgxHierarchicalGridComponent properties:

    IgxColumnComponent properties:

    IgxGridToolbarComponent properties:

    IgxGridToolbarComponent components:

    IgxGridToolbarComponent methods:

    IgxHierarchicalGridComponent events:

    IgxRadioComponent

    Styles:

    추가 리소스

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