グリッド ツールバー

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

デモ


showToolbar プロパティを使用して IgxGrid ツールバーを表示するには、true に設定します。ツールバーは、テキスト タイトルの左揃えをサポートし、グリッドの toolbarTitle プロパティを使用してコンテンツを設定します。以下のコード スニペットは、ツールバーとタイトルを設定する方法を確認できます。

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title">
</igx-grid>

機能

IgxGrid のツールバーは、列の非表示、列のピン固定、データを MS Excel や CSV 形式にエクスポートできます。 各機能は、対応する boolean プロパティを設定して個別に有効にすることができます。

  • 列の非表示は columnHidingtrue に設定
  • 列のピン固定は columnPinningtrue に設定
  • MS Excel エクスポートは、グリッドの exportExcel プロパティを true に設定
  • CSV エクスポートは、グリッドの exportCsv プロパティを true に設定

各ボタン テキストを設定するプロパティについては、以下の API セクションを確認してください。


以下のコード スニペットは、ツールバーのすべての機能を有効にする方法を示します。

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title"
    [columnHiding]="true"
    [columnPinning]="true"
    [exportExcel]="true"
    [exportCsv]="true"
    exportText="Export"
    exportExcelText="Export to Excel"
    exportCsvText="Export to CSV">
</igx-grid>

MS Excel および CSV へのエクスポートは、プロバイダーとしてそれぞれ IgxExcelExporterServiceIgxCsvExporterService を使用します。いずれかを使用する場合は、app.module.ts ファイルのプロバイダー配列で指定してください。たとえば、以下のコード スニペットは、すべてのエクスポーター サービスを含む方法を示します。

// app.module.ts

...
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService, IgxCsvExporterService ]
})

export class AppModule {}

エクスポートのカスタマイズ

更にツールバー機能は簡単にオン/オフすることができます。エクスポート処理は、エクスポート処理初期化する際に発生される onToolbarExporting イベントで詳細設定することができます。このイベントは、エクスポーターとエクスポーターのオプションで公開できます。

Note

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

以下のコード スニペットは、onToolbarExporting イベントにサブスクライブする方法やデフォルトのエクスポート処理をキャンセルする方法を示します。

<igx-grid ... (onToolbarExporting)="toolbarExportingHandler($event)"></igx-grid>
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

...

public toolbarExportingHandler(args) {
    // You can customize the exporting from this event
    const options: IgxExporterOptionsBase = args.options ;
    options.fileName = "Custom Title";

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

    args.exporter.onColumnExport.subscribe((columnArgs: IColumnExportingEventArgs) => {
        // Don't export image fields
        columnArgs.cancel = columnArgs.header === "Avatar" ||
                            columnArgs.header === "CountryFlag";
    });
}

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


API リファレンス

以下は、Grid ツールバー サービスのその他の API のリンクです。

IgxGridToolbarComponent

IgxGridComponent プロパティ:

IgxGridComponent イベント:

スタイル:

その他のリソース

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