Angular Tree Grid Toolbar

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

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Tree 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-tree-grid>
html

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

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

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-tree-grid>
html

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

    機能

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    タイトル

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

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

    操作

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

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

    各アクションは、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>
html
    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;
}
ts

    デフォルトの 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>
html

    列の非表示

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

    高度なフィルタリング

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

    データのエクスポート

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

    // app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService, IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package

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

    v12.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>
html

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

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

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

    <igx-tree-grid (toolbarExporting)="configureExport($event)" ></igx-tree-grid>
html
    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 field
        columnArgs.cancel = columnArgs.header === 'Name';
        
    });
}
typescript

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    カスタム コンテンツ

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

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

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

    <igx-tree-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-tree-grid>
html

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    スタイル設定

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

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

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

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

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

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

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

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

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

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

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

    $dark-button-theme: button-theme(
  $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(
  $tick-color: $my-dark-color,
);
scss

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

    @include css-vars($dark-grid-toolbar-theme);
@include css-vars($dark-column-actions-theme);
@include css-vars($dark-checkbox-theme);
@include css-vars($dark-button-theme);
scss

    コンポーネントが Emulated ViewEncapsulation を使用している場合、グリッド ツールバー コンポーネント内のコンポーネントのスタイルを設定するために、::ng-deep を使用してこのカプセル化を解除する必要があります。

    @include css-vars($dark-grid-toolbar-theme);

:host {
  ::ng-deep {
    @include css-vars($dark-column-actions-theme);
    @include css-vars($dark-checkbox-theme);
    @include css-vars($dark-button-theme);
  }
}
scss

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    API リファレンス

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

    IgxTreeGridComponent イベント:

    スタイル:

    その他のリソース

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