Angular Tree Grid の列非表示
Ignite UI for Angular Tree Grid は、IgxColumnHidingDirective のある IgxColumnActionsComponent を提供し、ユーザーがユーザー インターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを Tree Grid のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。
Angular Tree Grid 列非表示の例
Tree Grid の設定
Tree Grid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。
<!--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>
ツールバーの列非表示 UI
定義済みの列非表示 UI は、Tree Grid のツールバーの IgxDropDownComponent 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。
これには、Tree Grid の 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;
}
Tree Grid にはツールバーの列非表示 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 プロパティを使用できます。アプリケーションの要件に基づいて使用できます。
このトピックのはじめにあるコードの結果は、列非表示の例セクションで確認できます。
カスタム列の非表示 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;
}
タイトルおよびフィルター プロンプトの追加
列非表示コンポーネント機能を拡張するために 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>
列の表示順序オプションの追加
列非表示 UI で列の表示順序を選択する機能も追加します。このため、columnDisplayOrder プロパティを使用します。列挙型のプロパティで、以下のオプションがあります。
- Alphabetical (列をアルファベット順でソート)
- 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 プロパティを異なる条件に個々にバインドして、click イベントを処理します。
<!--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>
列の非表示の無効化
列の 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 *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @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-column-actions 内で igx-button ミックスインのスコープを設定し、列非表示ボタンのみがスタイル設定されるようにします。そうでない場合は、グリッド内の他のボタンも影響を受けます。
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include column-actions($custom-column-actions-theme);
.igx-column-actions {
@include button($custom-button);
}
}
}
カラーパレットの定義
上記のように色の値をハードコーディングする代わりに、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 は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。
スキーマの使用
テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
// 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) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。
// 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
);
上記と同じ方法でテーマを含める必要があることに注意してください。
デモ
API リファレンス
このトピックでは、Tree Grid のツールバーの定義済みの列非表示 UI の使用方法や別のコンポーネントとして定義する方法について説明しました。その他の列順序から選択する機能を提供する UI を実装し、カスタム タイトルおよびフィルター プロンプト テキストを設定しました。IgxRadio ボタンなどその他の Ignite UI for Angular コンポーネントも使用しています。
以下は、列非表示 UI のその他の API です。
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
IgxTreeGridComponent プロパティ:
IgxColumnComponent プロパティ:
IgxGridToolbarComponent プロパティ:
IgxGridToolbarComponent コンポーネント:
IgxGridToolbarComponent メソッド:
IgxTreeGridComponent イベント:
スタイル:
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub