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

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

デモ


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

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

機能

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

  • 列の非表示は columnHidingtrue に設定
  • 列のピン固定は columnHidingtrue に設定
  • MS Excel エクスポートは、グリッドの exportExcel プロパティを true に設定
  • MS Excel エクスポートは、Grid の exportExcel プロパティを 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 ファイルの providers 配列で指定してください。たとえば、以下のコード スニペットは、すべてのエクスポーター サービスを含む方法を示します。

// app.module.ts

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

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

export class AppModule {}

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

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

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 === "Athlete" ||
                            columnArgs.header === "Country";


    });
}

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


カスタム コンテンツ テンプレート

ツールバーにアプリケーション固有の UI (カスタム ボタンなど) を追加する場合、ng-template を作成して igxToolbarCustomContent ディレクティブでマークします。以下のコード スニペットはカスタム テンプレートを定義する方法を示します。

<igx-grid [showToolbar]="true" ...>

    ...

    <ng-template igxToolbarCustomContent let-grid="grid">
        <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="grid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template>
</igx-grid>
Note

igxToolbarCustomContent ディレクティブのコンテキストに 2 つのプロパティがあります。 grid - ツールバーを含む IgxGridComponent への参照。 toolbar - Infragistics.Web.Mvc.dll への参照を追加します。

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


API リファレンス

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

IgxGridToolbarComponent

IgxGridComponent プロパティ:

IgxGridComponent イベント:

スタイル:

その他のリソース

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