Angular Hierarchical Grid の Excel スタイルフィルタリング

グリッド Excel フィルタリングは、Hierarchical Grid などの Angular テーブルに対して Excel のようなフィルタリング UI を提供します。

Angular Hierarchical Grid Excel スタイルフィルタリングの例

使用方法

Excel スタイルフィルタリングをオンにするには、2 つの入力を設定します。allowFiltering を true に設定し、filterMode を excelStyleFilter に設定してください。

<igx-hierarchical-grid [data]="data" [autoGenerate]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
</igx-hierarchical-grid>

インタラクション

特定の列のフィルターメニューを開くには、ヘッダーの Angular フィルターアイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L の組み合わせを使用できます。列でフィルタリング機能と並べ替え、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。

フィルターが適用されていない場合、リストのすべての項目が選択されます。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter を押します。リスト項目に適用したフィルタリングは、equals オペレーターでフィルター式を作成します。各式間のロジックオペレーターは OR です。

検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。

フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。

異なる式でフィルターを適用する場合、Text フィルター をクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタムフィルターダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。

メニュー機能の構成

ソート、移動、ピン固定、非表示の機能をフィルターメニューから削除できます。これらを制御する入力は以下のとおりです: sortable、selected、disablePinning、disableHiding。

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false" [moving]="true" [allowFiltering]='true' filterMode="excelStyleFilter"
    [height]="'650px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
    <igx-column field="Artist" [filterable]='true' [sortable]="true"></igx-column>
    <igx-column field="Photo" [filterable]='false'>
        <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" [filterable]='true' [disablePinning]="true" [disableHiding]="true"></igx-column>
    <igx-column field="Grammy Nominations" [filterable]='true' [dataType]="'number'" [sortable]="false"></igx-column>
    <igx-column field="Grammy Awards" [filterable]='true' [dataType]="'number'"></igx-column>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter">
        <igx-column field="Album" [filterable]='true'></igx-column>
        <igx-column field="Launch Date" [filterable]='true' [dataType]="'date'"></igx-column>
        <igx-column field="Billboard Review" [filterable]='true' [dataType]="'number'"></igx-column>
        <igx-column field="US Billboard 200" [filterable]='true' [dataType]="'number'"></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>

以下のサンプルは、'Artist' 列で 4 つの機能が有効、'Debut' で 4 つの機能が無効、'Grammy Nominations' でピン固定と非表示のみ有効です。

テンプレート

列機能を無効にせずに Excel スタイルフィルターメニューをさらにカスタマイズする場合は、カスタムテンプレートを使用できます。Excel スタイルフィルターメニューには、テンプレート化のための 2 つのディレクティブがあります:

IgxExcelStyleColumnOperationsTemplateDirective - ソート、移動、固定などのすべての列操作で領域を再テンプレート化します。
IgxExcelStyleFilterOperationsTemplateDirective - すべてのフィルター固有の操作で領域を再テンプレート化します。

これらの領域の 1 つだけ、または両方を再テンプレート化できます。これらのディレクティブ内にカスタムコンテンツを配置したり、組み込みの Excel スタイルフィルタリングコンポーネントを使用できます。

次のコードは、igx-excel-style-header、igx-excel-style-sorting および igx-excel-style-search コンポーネントを使用してカスタム Excel スタイルフィルターメニューを定義する方法を示しています。

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter"
    [height]="'650px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
    
    <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
        <igx-excel-style-column-operations>
            <igx-excel-style-header
                [showPinning]="true"
                [showHiding]="true"
            >
            </igx-excel-style-header>

            <igx-excel-style-sorting></igx-excel-style-sorting>
        </igx-excel-style-column-operations>

        <igx-excel-style-filter-operations>
            <igx-excel-style-search></igx-excel-style-search>
        </igx-excel-style-filter-operations>
    </igx-grid-excel-style-filtering>

    ...

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter">
        <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
            <igx-excel-style-column-operations>
                <igx-excel-style-header
                    [showPinning]="true"
                    [showHiding]="true"
                >
                </igx-excel-style-header>

                <igx-excel-style-sorting></igx-excel-style-sorting>
            </igx-excel-style-column-operations>

            <igx-excel-style-filter-operations>
                <igx-excel-style-search></igx-excel-style-search>
            </igx-excel-style-filter-operations>
        </igx-grid-excel-style-filtering>
        ....
</igx-hierarchical-grid>

igxExcelStyleHeaderIcon ディレクティブを使用して、列ヘッダーの Excel スタイルフィルタリングアイコンを再テンプレート化することもできます。

<igx-hierarchical-grid ...>
    <ng-template igxExcelStyleHeaderIcon>
        <igx-icon>filter_alt</igx-icon>
    </ng-template>
</igx-hierarchical-grid>

以下は、使用可能な Excel スタイルフィルタリングコンポーネントの完全なリストです:

一意の列値ストラテジ

Excel スタイルフィルタリングダイアログ内のリスト項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロードオンデマンドすることができます。詳細については、Hierarchical Grid リモートデータ操作で説明されています。

書式設定された値のフィルタリングストラテジ

デフォルトで、Hierarchical Grid コンポーネントは元のセル値に基づいてデータをフィルターしますが、場合によっては書式設定された値に基づいてデータをフィルターすることができます。そのためには、FormattedValuesFilteringStrategy を使用します。以下のサンプルは、列の数値を文字列として書式設定し、文字列値に基づいて Hierarchical Grid をフィルターする方法を示します。

Note

データの同じフィールドに複数の列がバインドされていて、1 つの列にフォーマッタがある場合、書式設定された値のフィルタリングストラテジは正しく動作しません。

外部の Excel スタイルフィルタリング

上記デモで示されるように、Excel スタイルフィルタリングダイアログのデフォルトの外観は Hierarchical Grid 内にあります。このダイアログは、フィルターを構成するときにのみ表示されます。ダイアログはグリッドの外部でスタンドアロンコンポーネントとして使用すると、常に表示になります。以下のデモでは、Excel スタイルフィルタリングが Hierarchical Grid とは別に宣言されます。

デモ

使用方法

Excel スタイルフィルタリングコンポーネントを設定するには、column プロパティを Hierarchical Grid 列の 1 つに設定する必要があります。上記のサンプルで、column プロパティは Hierarchical Grid 列を表示する IgxSelectComponent の値にバインドされています。

<igx-select #gridColums value="Artist">
   <label igxLabel>Columns:</label>
   <igx-select-item *ngFor="let c of hierarchicalgrid1.columns" [value]="c.field">
       {{ c.field }}
   </igx-select-item>
</igx-select>

<igx-grid-excel-style-filtering [column]="hierarchicalgrid1.getColumnByName(gridColums.value)">
</igx-grid-excel-style-filtering>

表示要素が重なる場合のアウトレット設定

Hierarchical Grid の z-index は、DOM の各グリッドに個別の重ね合わせコンテキストを作成します。これにより、グリッドのすべての子孫要素が互いに重ね合うことなく意図したとおりに描画されます。ただし、グリッドの外側にある要素 (Excel スタイルフィルターなど) は、同じ z-index を持つ外側の要素 (たとえば、2 つのグリッドが上下に重ねる) と競合し、誤った描画が発生します。この問題の解決策は、outlet プロパティを外部のアウトレットディレクティブに設定し、オーバーレイ要素が常に上に表示されるようにすることです。

デモ

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

Excel スタイルのフィルタリングダイアログは、filtering-row-background パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタムテーマを作成する必要があります。

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリングダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。

$dark-button: button-theme(
    $background: #FFCD0F,
    $foreground: #292826,
    $hover-background: #292826,
    $hover-foreground: #FFCD0F
);

$dark-input-group: input-group-theme(
    $box-background: #FFCD0F,
    $idle-text-color: #292826,
    $focused-text-color: #292826,
    $filled-text-color: #292826
);

$custom-list: list-theme(
    $background: #FFCD0F
);

$custom-checkbox: checkbox-theme(
    $empty-color: #292826,
    $fill-color: #292826,
    $tick-color: #FFCD0F,
    $label-color: #292826
);

$custom-drop-down: drop-down-theme(
    $background-color: #FFCD0F,
    $item-text-color: #292826,
    $hover-item-background: #292826,
    $hover-item-text-color: #FFCD0F
);

この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、button-theme、checkbox-theme、drop-down-theme、input-group-theme、list-theme テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。

最後の手順は、それぞれのテーマを持つコンポーネントミックスインを含めることです。また、入力のプレースホルダーの色プロパティを設定します。

@include drop-down($custom-drop-down);
@include grid($custom-grid);
.igx-excel-filter, .igx-excel-filter__secondary {
    @include button($dark-button);
    @include input-group($dark-input-group);
    @include list($custom-list);
    @include checkbox($custom-checkbox);
    .igx-input-group__input::placeholder {
        color: #FFCD0F;
    }
}

Note

.igx-excel-filter と .igx-excel-filter__secondary 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイルフィルタリングダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
    ::ng-deep {
        @include drop-down($custom-drop-down);
        @include grid($custom-grid);
        .igx-excel-filter, .igx-excel-filter__secondary {
            @include button($dark-button);
            @include input-group($dark-input-group);
            @include list($custom-list);
            @include checkbox($custom-checkbox);
            .igx-input-group__input::placeholder {
                color: #FFCD0F;
            }
        }
    }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します:

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

また igx-color を使用してパレットから簡単に色を取り出すことができます。

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

$dark-button: button-theme(
    $background: color($dark-palette, "secondary", 400),
    $foreground: color($dark-palette, "primary", 400),
    $hover-background: color($dark-palette, "primary", 400),
    $hover-foreground: color($dark-palette, "secondary", 400)
);

$dark-input-group: input-group-theme(
    $box-background: color($dark-palette, "secondary", 400),
    $idle-text-color: color($dark-palette, "primary", 400),
    $focused-text-color: color($dark-palette, "primary", 400),
    $filled-text-color: color($dark-palette, "primary", 400)
);

$custom-list: list-theme(
    $background: color($dark-palette, "secondary", 400)
);

$custom-checkbox: checkbox-theme(
    $empty-color: color($dark-palette, "primary", 400),
    $fill-color: color($dark-palette, "primary", 400),
    $tick-color: color($dark-palette, "secondary", 400),
    $label-color: color($dark-palette, "primary", 400)
);

$custom-drop-down: drop-down-theme(
    $background-color: color($dark-palette, "secondary", 400),
    $item-text-color: color($dark-palette, "primary", 400),
    $hover-item-background: color($dark-palette, "primary", 400),
    $hover-item-text-color: color($dark-palette, "secondary", 400)
);

Note

igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

スキーマの使用

テーマエンジンを使用してスキーマの利点を使用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネント (この場合はlight-grid、light-input-group、light-button、light-list、light-checkbox、light-drop-down) に提供される 2 つの定義済みスキーマのいずれかを拡張します。

$custom-grid-schema: extend($_light-grid,
    (
        filtering-row-background:(
           color: ("secondary", 400)
        )
    )
);

$custom-button-schema: extend($_light-button,
    (
        flat-background:(
           color: ("secondary", 400)
        ),
        flat-text-color:(
           color: ("primary", 400)
        ),
        flat-hover-background:(
           color: ("primary", 400)
        ),
        flat-hover-text-color:(
           color: ("secondary", 400)
        ),

        raised-background:(
           color: ("secondary", 400)
        ),
        raised-text-color:(
           color: ("primary", 400)
        ),
        raised-hover-background:(
           color: ("primary", 400)
        ),
        raised-hover-text-color:(
           color: ("secondary", 400)
        )
    )
);

$custom-input-group-schema: extend($_light-input-group,
    (
        box-background:(
           color: ("secondary", 400)
        ),
        idle-text-color:(
           color: ("primary", 400)
        ),
        focused-text-color:(
           color: ("primary", 400)
        ),
        filled-text-color:(
           color: ("primary", 400)
        )
    )
);

$custom-list-schema: extend($_light-list,
    (
        background:(
           color: ("secondary", 400)
        )
    )
);

$custom-checkbox-schema: extend($_light-checkbox,
    (
        empty-color:(
           color: ("primary", 400)
        ),
        fill-color:(
           color: ("primary", 400)
        ),
        tick-color:(
           color: ("secondary", 400)
        ),
        label-color:(
           color: ("primary", 400)
        )
    )
);

$custom-drop-down-schema: extend($_light-drop-down,
    (
        background-color:(
           color: ("secondary", 400)
        ),
        item-text-color:(
           color: ("primary", 400)
        ),
        hover-item-background:(
           color: ("primary", 400)
        ),
        hover-item-text-color:(
           color: ("secondary", 400)
        )
    )
);

カスタムスキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタムスキーマでコンポーネントを指し示し、その後それぞれのコンポーネントテーマに追加するものです。

$custom-light-schema: extend($light-schema,(
   grid: $custom-grid-schema,
   button: $custom-button-schema,
   input-group: $custom-input-group-schema,
   list: $custom-list-schema,
   checkbox: $custom-checkbox-schema,
   drop-down: $custom-drop-down-schema
));

$custom-grid: grid-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-button: button-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-input-group: input-group-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-list: list-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-checkbox: checkbox-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-drop-down: drop-down-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

テーマを上記と同じ方法で含めることに注意してください。

デモ

Note

このサンプルは、「テーマの変更」から選択したグローバルテーマに影響を受けません。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular Hierarchical Grid の Excel スタイル フィルタリング

Angular Hierarchical Grid Excel スタイル フィルタリングの例

使用方法

インタラクション

メニュー機能の構成

テンプレート

一意の列値ストラテジ

書式設定された値のフィルタリング ストラテジ

Note

外部の Excel スタイル フィルタリング

デモ

使用方法

表示要素が重なる場合のアウトレット設定

デモ

スタイル設定

Note

Note

カラーパレットの定義

Note

スキーマの使用

デモ

Note

API リファレンス

その他のリソース

テーマ設定

Angular Hierarchical Grid の Excel スタイルフィルタリング

Angular Hierarchical Grid Excel スタイルフィルタリングの例

書式設定された値のフィルタリングストラテジ

外部の Excel スタイルフィルタリング