UI 操作のための Grid ツールバーコンテナ

Ignite UI for Angular の Grid は、UI 操作のコンテナとなる IgxGridToolbarComponent 機能をサポートします。Angular ツールバーは Angular コンポーネントの一番上、つまり Grid にあり、水平方向のサイズと一致します。ツールバーのコンテナは、グリッド機能に関連するさまざまな UI コントロール (列の非表示、列ピン固定、エクセルエクスポート、Angular イベントなど) をホストします。

Angular ツールバーグリッドの例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Grid タグの間に igx-grid-toolbar コンポーネントを挿入することにより、Grid のツールバーを有効にできます。ツールバーの追加機能は、デフォルトのツールバー UI コンポーネントを使用するか、独自のコンポーネントを作成することで有効になります。デフォルトの UI コンポーネントとそれらを有効にする方法の全般的な概要については、以下の機能セクションを読み進めてください。以下のコードスニペットは、ツールバーとタイトルを設定する方法を確認できます。

<igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid Title</igx-grid-toolbar-title>
    </igx-grid-toolbar>
</igx-grid>

機能

ツールバーは、グリッド全体に影響を与えるロジック/インタラクションを分離するのに最適です。したがって、制御、列の非表示、列のピン固定、高度なフィルタリング、およびグリッドからのデータのエクスポートのためのデフォルトのコンポーネントを提供するように構成できます。これらの機能は、Ignite UI for Angular スイートのカードコンポーネントと同様のパターンに従うことで、互いに独立して有効にできます。以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプルコードです。

タイトル

グリッドのツールバーのタイトルを設定するには、IgxGridToolbarTitleDirective を使用します。ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。

<igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
</igx-grid-toolbar>

操作

ツールバーは、ユーザーが親グリッドに関連して操作/インタラクションを配置できる特定のコンテナを公開します。ツールバーのタイトル部分と同様に、ユーザーは、デフォルトのツールバーインタラクションコンポーネントを含め、そのテンプレート部分内にどんなものでも提供できます。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <button igxButton>Action</button>
        <igx-select></igx-select>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

列のピン固定

このコンポーネントは、グリッド内の列のピン固定を操作するためのデフォルトの UI を提供します。コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-pinning>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

列の非表示

ピン固定操作コンポーネントと同様に、非表示コンポーネントは、列の非表示と対話するためのデフォルトの UI を提供します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

高度なフィルタリング

グリッドで高度なフィルタリングが有効になっている場合、ユーザーは高度なフィルタリング機能のデフォルトコンポーネントを提供できます。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

データのエクスポート

残りのツールバー操作と同様に、エクスポートは、すぐに使用できるツールバーコンポーネントを介して提供されます。エクスポートコンポーネントは、ターゲットデータ形式 (Excel CSV) のそれぞれのサービスを使用しています。つまり、それぞれのサービスが依存関係挿入チェーンを通じて提供されない場合、コンポーネントは何もエクスポートできません。 Angular の DI の復習が必要な場合は、公式ガイドをご覧ください。これは、アプリケーションのすべてのエクスポートサービスを有効にする方法を示すサンプルスニペットです。

// app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-angular';

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService ]
})
export class AppModule { ... }

ツールバーエクスポーターコンポーネントは、UI とエクスポートエクスペリエンスの両方をカスタマイズするためのいくつかの入力プロパティを公開します。これらは、表示テキストの変更から、ドロップダウンのオプションの有効化/無効化、生成されたファイルの名前のカスタマイズまで多岐にわたります。完全なリファレンスについては、ツールバーエクスポータコンポーネントの API ヘルプを参照してください。

これは、Angular テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-exporter
            <!-- If active, enables the csv export entry in the dropdown UI -->
            [exportCSV]="csvExportEnabled"
            <!-- If active, enables the excel export entry in the dropdown UI -->
            [exportExcel]="excelExportEnabled"
            <!-- The name of the generated export file without the file extension -->
            filename="exported_data"
        >
            Custom text for the exporter button
            <span excelText>Custom text for the excel export entry</span>
            <span csvText>Custom text for the CSV export entry</span>
        </igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

エクスポートされたファイル名を変更することに加えて、ユーザーは onToolbarExporting イベントを待機し、イベントプロパティのオプションエントリをカスタマイズすることで、エクスポーターオプションをさらに構成できます。

Note

デフォルトで CSV にエクスポートした際にエクスポーターがカンマ区切りセパレーターを使用してエクスポートし、出力ファイルに .csv 拡張しを使用します。エクスポーターのイベントにサブスクライブまたはエクスポーターオプションフィールドの値を変更して、エクスポートパラメーターをカスタマイズできます。またイベント引数のキャンセルフィールドを true に設定してエクスポートをキャンセルすることもできます。

次のコードスニペットは、ツールバーのエクスポートイベントのサブスクライブとエクスポーターオプションの構成を示しています。

<igx-grid (onToolbarExporting)="configureExport($event)" ></igx-grid>

configureExport(args: IGridToolbarExportEventArgs) {
    const options: IgxExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;

    if (options instanceof IgxExcelExporterOptions) {
        options.columnWidth = 10;
    } else {
        options.fileType = CsvFileTypes.TSV;
        options.valueDelimiter = "\t";
    }

    args.exporter.onColumnExport.subscribe((columnArgs: IColumnExportingEventArgs) => {

        // Don't export image fields
        columnArgs.cancel = columnArgs.header === "Athlete" ||
                            columnArgs.header === "Country";


    });
}

以下のサンプルは、エクスポートファイルをカスタマイズする方法を示します。

エクスポートインジケーター

デフォルトのツールバーエクスポーターコンポーネントを使用する場合、エクスポート操作が行われると、操作の進行中にツールバーに進行状況インジケーターが表示されます。さらに、ユーザーはツールバーの showProgress プロパティを設定して、自分の長時間実行操作に使用するか、グリッドで実行されている操作を示す別の方法として使用できます。

以下のサンプルでは、progressbar が表示されるようにデータのエクスポートに必要な時間を増やすために、大量のデータを使用しています。さらに、グリッドで長時間実行される操作をシミュレートする別のボタンがあります。

カスタムコンテンツ

Note

これは、古いツールバーテンプレートディレクティブを置き換えます。v11 より前のバージョンから移行する場合は、マイグレーションによってテンプレートコンテンツの移動が処理されます。ただし、テンプレート内のバインディングは処理しないため、マイグレーションの完了後に、変更されたテンプレートファイルを再確認してください。

ツールバーコンポーネントのアクション部分が特定のユースケースに十分でない場合、ツールバー自体には、ユーザーが追加の UI を提供できる一般的なコンテンツプロジェクションがあります。ユーザーが API 呼び出しまたはバインディングにそれぞれのグリッドインスタンスを必要とする場合は、テンプレート参照変数を作成できます。

サンプルスニペットは次のとおりです。

<igx-grid #gridRef ...>

    ...
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>

        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>

        <igx-grid-toolbar-actions>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

</igx-grid>

以下のサンプルは、列ヘッダーをクリックして並べ替えセットをクリアするためのボタンをツールバーに追加する方法です。

スタイル設定

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

// custom-grid-paging-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-grid-toolbar-theme を拡張する新しいテーマを作成し、$background-color と $title-text-color パラメーターを受け取る方法です。

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: #292826,
    $title-text-color: #FFCD0F
);

ツールバー内のボタンをスタイル設定するために、igx-button-theme を拡張する別のテーマを作成します。

$dark-button-theme: igx-button-theme(
    $outlined-background: #FFCD0F,
    $outlined-text-color: #292826,
    $outlined-hover-background: #404040,
    $outlined-hover-text-color: #FFCD0F
);

最後にコンポーネントのテーマを含めます。Button テーマは、ツールバーのアクションコンテナにスコープされるため、外側のボタンはツールバーに影響を受けません。

@include igx-grid-toolbar($dark-grid-toolbar-theme);
.igx-grid-toolbar__actions {
    @include igx-button($dark-button-theme);

    .igx-button--outlined {
        margin-left: 0.5rem;
        border: none;
    }
}

Note

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

:host {
    ::ng-deep {
        @include igx-grid-toolbar($dark-grid-toolbar-theme);

        .igx-grid-toolbar__actions {
            @include igx-button($dark-button-theme);

            .igx-button--outlined {
                margin-left: 0.5rem;
                border: none;
            }
        }
    }
}

カラーパレットの定義

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

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

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

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

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

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

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: igx-color($dark-palette, "primary", 200),
    $title-text-color: igx-color($dark-palette, "secondary", 400)
);

Note

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

スキーマの使用

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

すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (この場合は (dark-grid-toolbar と dark-button スキーマ) の 1 つを拡張します。

$dark-grid-toolbar-schema: extend($_dark-grid-toolbar,
    (
        background-color:(
            igx-color: ("primary", 200)
        ),
        title-text-color:(
            igx-color: ("secondary", 400)
        )
    )
);

$dark-button-schema: extend($_dark-button,
    (
        outlined-background: (
            igx-color: ("secondary", 400)
        ),
        outlined-text-color: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-background: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-text-color: (
            igx-color: ("secondary", 400)
        )
    )
);

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

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-grid-toolbar: $dark-grid-toolbar-schema,
    igx-button: $dark-button-schema
));

// Defining button-theme with the global dark schema
$dark-button-theme: igx-button-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

// Defining grid-toolbar-theme with the global dark schema
$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

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

デモ

API リファレンス

以下は、Grid Toolbar サービスのその他の API です。

IgxGridComponent イベント:

onToolbarExporting

スタイル:

IgxGridComponent スタイル

その他のリソース

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

UI 操作のための Grid ツールバー コンテナ

Angular ツールバー グリッドの例

機能

タイトル

操作

列のピン固定

列の非表示

高度なフィルタリング

データのエクスポート

Note

エクスポート インジケーター

カスタム コンテンツ

Note

スタイル設定

Note

カラーパレットの定義

Note

スキーマの使用

デモ

API リファレンス

その他のリソース

テーマ設定

UI 操作のための Grid ツールバーコンテナ

Angular ツールバーグリッドの例

エクスポートインジケーター

カスタムコンテンツ