Angular Grid Toolbar

Ignite UI for Angular の Grid は、UI 操作のコンテナーとなる IgxGridToolbarComponent 機能をサポートします。Angular ツールバーは Angular コンポーネントの一番上、つまり Grid にあり、水平方向のサイズと一致します。ツールバーコンテナーは、次の Grid の機能、またはその他のカスタムコンテンツ用に事前定義された UI コントロールをホストできます:

列の非表示
列のピン固定
Excel エクスポート
高度なフィルタリング

ツールバーと事前定義された UI コンポーネントは、Angular イベントをサポートし、開発者向けに API を公開します。

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

事前定義された actions および title UI コンポーネントが <igx-grid-toolbar> 内に追加されます。これはすべて、対応するグリッド機能とのデフォルトのインタラクションを提供するツールバーを持つために必要です。

<igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
            <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-grid>

注: 上記のコードスニペットに示されているように、事前定義された actions UI コンポーネントは <igx-grid-toolbar-actions> コンテナーにラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。

これらの UI はそれぞれ独立して追加することも、まったく追加しないこともできます。このようにして、ツールバーコンテナーは空になります。

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

デフォルトの各 UI コンポーネントの詳細については、以下の機能セクションを読み続けてください。

機能

ツールバーは、グリッド全体に影響を与えるロジック/インタラクションを分離するのに最適です。上記のように、制御、列の非表示、列のピン固定、高度なフィルタリング、およびグリッドからのデータのエクスポートのためのデフォルトのコンポーネントを提供するように構成できます。これらの機能は、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] キーを押して閉じるインタラクションと外側のクリックで閉じるインタラクションが有効になっています。

列のピン固定

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

列の非表示

Toolbar Hiding コンポーネントは、列非表示を操作するためのデフォルトの UI を提供します。コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、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>

高度なフィルタリング

Toolbar Advanced Filtering コンポーネントは、高度なフィルタリング機能のデフォルトの UI を提供します。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。

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

データのエクスポート

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

// app.module.ts

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

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

Note

v 12.2.1 以降では、エクスポーターサービスは root で提供されます。つまり、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>

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

Note

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

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

<igx-grid (toolbarExporting)="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 ファイルをインポートする必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Note

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

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

Note

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

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

デモ

API リファレンス

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

IgxGridComponent イベント:

toolbarExporting

スタイル:

IgxGridComponent スタイル

その他のリソース

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

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

機能

タイトル

操作

列のピン固定

列の非表示

高度なフィルタリング

データのエクスポート

Note

Note

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

カスタム コンテンツ

Note

スタイル設定

Note

Note

デモ

API リファレンス

その他のリソース

テーマ設定

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

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

カスタムコンテンツ