Angular Hierarchical Grid の列非表示

Ignite UI for Angular Hierarchical Grid は、IgxColumnHidingDirective のある IgxColumnActionsComponent を提供し、ユーザーがユーザーインターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを Hierarchical Grid のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。

Angular Hierarchical Grid 列非表示の例

Hierarchical Grid の設定

Hierarchical Grid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。

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

ツールバーの列非表示 UI

定義済みの列非表示 UI は、Hierarchical Grid のツールバーの 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
}

Hierarchical Grid にはツールバーの列非表示 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 プロパティを使用できます。アプリケーションの要件に基づいて使用できます。

このトピックのはじめにあるコードの結果は、列非表示の例セクションで確認できます。

スタイル設定

列操作コンポーネントのスタイル設定を開始するには、すべてのテーマ関数とコンポーネントミックスインが存在するインデックスファイルをインポートする必要があります。

@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: #292826,
  $title-color: #ffcd0f
);

ご覧のように column-actions-theme は列操作コンテナーの色のみを制御しますが、ボタン、チェックボックス、内部の入力グループには影響しません。ボタンのスタイルも設定したい場合、新しいボタンテーマを作成します。

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

Note

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

この例では、フラットボタンのテキストの色とボタンの無効な色のみを変更しましたが、button-theme の方がより多くの方法を提供します。ボタンのスタイルを制御するパラメーター。

最後にそれぞれのテーマを持つコンポーネントミックスインを含めることです。

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

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

Note

作成した button-theme を .igx-column-actions 内に含めて、列を非表示にするボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のボタンも影響を受けます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、列アクションコンポーネント内のコンポーネント (ボタン、チェックボックスなど) に対して ::ng-deep を使用してこのカプセル化を解除する必要があります。

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

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