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

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

各アクションは、overlaySettings 入力を使用して、アクションダイアログのオーバーレイ設定を変更する方法を公開するようになりました。例:

<igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>

public data: any[];
public positionStrategyScaleCenter = new GlobalPositionStrategy({
    openAnimation: scaleInCenter,
    closeAnimation: scaleOutCenter
});
public overlaySettingsScaleCenter = {
    positionStrategy: this.positionStrategyScaleCenter,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};

public positionStrategyAuto = new AutoPositionStrategy();
public overlaySettingsAuto = {
    positionStrategy: this.positionStrategyAuto,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: false,
    closeOnEscape: false
};
constructor() {
    this.data = athletesData;
}

デフォルトの overlaySettings は、ConnectedPositionStrategy と Absolute スクロール方法を使用しています。モーダルは false に設定されており、[Esc] キーを押して閉じるインタラクションと外側のクリックで閉じるインタラクションが有効になっています。

列のピン固定

このコンポーネントは、グリッド内の列のピン固定を操作するためのデフォルトの 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.columnExporting.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>

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

スタイル設定

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

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

まず、新しいパレットを作成します。

$my-dark-palette: igx-palette(
    $primary: #2466ff,
    $secondary: #FFCD0F,
    $surface: #2a2b2f,
    $grays: #fff,
);

$my-dark-color: igx-color($my-dark-palette, 'surface');

igx-grid-toolbar-theme を拡張する新しいテーマを作成し、$background-color と $title-text-color パラメーターを変更します。

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $palette: $my-dark-palette,
    $background-color: $my-dark-color,
    $title-text-color: igx-color($my-dark-palette, 'secondary'),
    $dropdown-background: $my-dark-color,
);

ツールバーの列操作メニューにテーマを設定するには、igx-column-actions-theme コンポーネントのテーマを変更する必要があります。

$dark-column-actions-theme: igx-column-actions-theme(
    $palette: $my-dark-palette,
    $title-color: igx-color($my-dark-palette, 'secondary'),
    $background-color: igx-color($my-dark-palette, 'surface')
);

列操作は他のコンポーネント (igx-button、igx-checkbox、および igx-input-group) を使用しているため、新しいツールバーテーマに一致するようにテーマを変更する必要があります。

$dark-button-theme: igx-button-theme(
    $palette: $my-dark-palette,
    $outlined-background: igx-color($my-dark-palette, 'secondary'),
    $outlined-hover-background: igx-color($my-dark-palette, 'grays', 100),
    $outlined-hover-text-color: igx-color($my-dark-palette, 'secondary')
);

$dark-checkbox-theme: igx-checkbox-theme(
    $palette: $my-dark-palette,
    $tick-color: $my-dark-color,
);

$dark-input-group-theme: igx-input-group-theme(
    $palette: $my-dark-palette
);

最後にコンポーネントのテーマを含めます。

:host {
    @include igx-grid-toolbar($dark-grid-toolbar-theme);
    @include igx-column-actions($dark-column-actions-theme);
    @include igx-checkbox($dark-checkbox-theme);
    @include igx-input-group($dark-input-group-theme);
    @include igx-button($dark-button-theme);
}

Note

$legacy-support が false (デフォルト) に設定されている場合、css 変数を以下のように含めます。

:host {
    @include igx-css-vars($dark-grid-toolbar-theme);
    @include igx-css-vars($dark-column-actions-theme);
    @include igx-css-vars($dark-checkbox-theme);
    @include igx-css-vars($dark-input-group-theme);
    @include igx-css-vars($dark-button-theme);
}

Note

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

:host {
    ::ng-deep {
        @include igx-grid-toolbar($dark-grid-toolbar-theme);
        @include igx-column-actions($dark-column-actions-theme);
        @include igx-checkbox($dark-checkbox-theme);
        @include igx-input-group($dark-input-group-theme);
        @include igx-button($dark-button-theme);
    }
}

デモ

API リファレンス

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

IgxGridComponent イベント:

onToolbarExporting

スタイル:

IgxGridComponent スタイル

その他のリソース

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

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

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

機能

タイトル

操作

列のピン固定

列の非表示

高度なフィルタリング

データのエクスポート

Note

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

カスタム コンテンツ

Note

スタイル設定

Note

Note

デモ

API リファレンス

その他のリソース

テーマ設定

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

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

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

カスタムコンテンツ