Angular Tree Grid Column Hiding
Ignite UI for Angular 사용자가 사용자 인터페이스를 통해 직접 또는 Angular 구성 요소를 사용하여 열 숨기기를 수행할 수 있도록 하는 IgxColumnHidingDirective와 함께 IgxColumnActionsComponent를 제공합니다. 머티리얼 UI 그리드에는 열 숨김 UI가 내장되어 있으며, 이는 트리 그리드의 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있습니다. 또한 개발자는 언제든지 UI를 숨기는 열을 별도의 구성 요소로 정의하고 페이지에서 원하는 위치에 배치할 수 있습니다.
Angular Tree Grid Column Hiding Example
Tree Grid Setup
트리 그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.
<!--columnHiding.component.html-->
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%"
height="560px" columnWidth="200px" [allowFiltering]="true">
<igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
<igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
<igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-tree-grid>
Toolbar's Column Hiding UI
내장된 열 숨기기 UI는 트리 그리드 도구 모음의 IgxDropDownComponent 내부에 배치됩니다. 이 정확한 드롭다운을 사용하여 열 숨기기 UI를 표시하거나 숨길 수 있습니다. 이를 위해 우리가 해야 할 일은 트리 그리드 내부에 IgxGridToolbarActionsComponent와 IgxGridToolbarHidingComponent 모두 설정하는 것뿐입니다. 또한 IgxGridToolbarTitleComponent와 Tree Grid 래퍼의 사용자 정의 스타일을 사용하여 도구 모음에 제목을 추가하겠습니다.
<!--columnHiding.component.html-->
<div class="grid__wrapper">
<igx-tree-grid ...>
<igx-grid-toolbar>
<igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
...
</igx-tree-grid>
</div>
/* columnHiding.component.css */
.grid__wrapper {
margin: 10px;
}
트리 그리드는 도구 모음의 열 숨기기 UI를 사용할 때 몇 가지 유용한 속성을 제공합니다. igx-grid-toolbar-hiding title 속성을 사용하여 툴바의 드롭다운 버튼 내부에 표시되는 제목을 설정하겠습니다.
<!--columnHiding.component.html-->
<div class="grid__wrapper">
<igx-tree-grid>
<igx-grid-toolbar>
<igx-grid-toolbar-title>Employees</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-tree-grid>
</div>
IgxGridToolbarHidingComponent의 columnsAreaMaxHeight 속성을 사용하면 열 작업이 포함된 영역의 최대 높이를 설정할 수 있습니다. 이렇게 하면 작업이 많고 모든 작업이 컨테이너에 들어갈 수 없는 경우 스크롤바가 나타나 원하는 작업으로 스크롤할 수 있습니다.
// columnHiding.component.ts
public ngAfterViewInit() {
this.hidingActionRef.columnsAreaMaxHeight = "200px";
}
열 숨김 UI에 대한 확장된 기능 세트를 사용하기 위해 IgxColumnActionsComponent의 columnsAreaMaxHeight 속성을 사용할 수 있습니다. 이렇게 하면 애플리케이션의 요구 사항에 따라 사용할 수 있습니다.
Angular 열 숨기기 예제 섹션의 이 문서 시작 부분에서 위의 코드 결과를 볼 수 있습니다.
Custom Column Hiding UI
IgxColumnActionsComponent를 수동으로 정의하고 IgxColumnHidingDirective 추가하여 해당 목적이 무엇인지 파악하고 페이지의 아무 곳에나 배치한다고 가정해 보겠습니다. 그러나 먼저 IgxColumnActionsModule을 가져와야 합니다.
// app.module.ts
...
import {
...
IgxColumnActionsModule
} from 'igniteui-angular';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxColumnActionsModule],
})
export class AppModule {}
이제 IgxColumnActionsComponent를 만들어 보겠습니다. 우리 애플리케이션에서는 이를 그리드 옆에 배치할 것입니다(구성 요소가 설계상 드롭다운 내부에 있는 툴바의 열이 UI를 숨기는 경우는 그렇지 않습니다). 또한 구성 요소의 columns 속성을 트리 그리드의 열로 설정하고 일부 사용자 정의 스타일을 포함하여 애플리케이션을 더욱 멋지게 만들 것입니다!
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
<igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns">
</igx-column-actions>
</div>
<div class="gridContainer">
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
...
</igx-tree-grid>
</div>
/* columnHiding.component.css */
.grid__wrapper {
margin: 15px;
display: flex;
flex-direction: row;
}
.columnHidingContainer {
min-width: 250px;
height: 560px;
display: flex;
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
border: 1px gray;
border-radius: 10px;
box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
igx-column-actions {
height: 460px;
}
}
.columnsOrderOptionsContainer {
margin-top: 20px;
margin-bottom: 20px;
}
.gridContainer {
width: 100%;
min-width: 200px;
display: flex;
flex-direction: column;
margin-left: 30px;
}
Add title and filter prompt
열 숨김 구성 요소의 사용자 경험을 풍부하게 하기 위해 할 수 있는 몇 가지 추가 작업은 title과 filterColumnsPrompt 속성을 설정하는 것입니다. title 상단에 표시되고 filterColumnsPrompt는 열 숨김 UI의 필터 입력에 표시되는 프롬프트 텍스트입니다.
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
<igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns"
title="Column Hiding" filterColumnsPrompt="Type here to search">
</igx-column-actions>
</div>
Add column display order options
또한 사용자가 열 숨김 UI에서 열 표시 순서를 선택하도록 허용할 수도 있습니다. 이를 위해 열거형 속성이고 다음 옵션이 있는 columnDisplayOrder 속성을 사용합니다.
- 알파벳순 (열을 알파벳순으로 정렬)
- DisplayOrder (트리 그리드에 표시되는 방식에 따라 열 순서 지정)
옵션에 맞게 멋지게 디자인된 라디오 버튼 몇 개를 만들어 보겠습니다! 계속해서 IgxRadio 모듈을 구하면 됩니다.
// app.module.ts
...
import {
...
IgxRadioModule
} from 'igniteui-angular';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
})
export class AppModule {}
이제 우리가 해야 할 일은 두 라디오 버튼의 checked 속성을 각각 다른 조건으로 바인딩하고 클릭 이벤트를 처리하는 것입니다.
<!--columnHiding.component.html-->
<div class="columnHidingContainer">
...
<div class="columnsOrderOptionsContainer">
<igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
(click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
Alphabetical order
</igx-radio>
<igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
(click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
Display order
</igx-radio>
</div>
</div>
Disable hiding of a column
단순히 disableHiding 속성을 true로 설정하면 사용자가 열 숨김 UI를 통해 열을 숨기는 것을 쉽게 방지할 수 있습니다.
<!--columnHiding.component.html-->
<div class="gridContainer">
<igx-tree-grid ... >
...
<igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
...
</igx-tree-grid>
</div>
모든 것이 잘 진행되었다면 UI 구성요소를 숨기는 열은 다음과 같습니다.
스타일링
열 작업 구성 요소의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.
@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
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
API References
이번 글에서는 Tree Grid의 툴바에 내장된 열 숨김 UI를 사용하는 방법을 알아보았고, 이를 별도의 컴포넌트로도 정의했습니다. 사용자가 다양한 열 순서 중에서 선택할 수 있는 UI를 도입했으며 자체 사용자 정의 제목과 필터 프롬프트 텍스트를 설정했습니다. 또한 Ignite UI for Angular 인 IgxRadio 버튼을 사용했습니다.
열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
IgxTreeGridComponent properties:
IgxColumnComponent properties:
IgxGridToolbarComponent properties:
IgxGridToolbarComponent components:
IgxGridToolbarComponent methods:
IgxTreeGridComponent events:
Styles:
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub