Angular Tree Grid Toolbar

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

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

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

    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>
    

    注: 上記のコード スニペットに示されているように、事前定義された 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>
    

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

    機能

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

    タイトル

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

    <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 は、ConnectedPositionStrategyAbsolute スクロール方法を使用しています。モーダルは 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';
    // import { IgxExcelExporterService, IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package
    
    @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-tree-grid (toolbarExporting)="configureExport($event)" ></igx-tree-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 field
            columnArgs.cancel = columnArgs.header === 'Name';
            
        });
    }
    

    }

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

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

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

    カスタム コンテンツ

    Note

    これは、古いツールバー テンプレート ディレクティブを置き換えます。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>
    

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

    スタイル設定

    ツールバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する 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-supportfalse (デフォルト) に設定されている場合、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 です。

    IgxTreeGridComponent イベント:

    スタイル:

    その他のリソース

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