Angular Grid Toolbar - Ignite UI for Angular

Components List

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

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

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

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

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

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

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Hierarchical 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-hierarchical-grid>
html

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

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

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-hierarchical-grid>
html

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

子グリッド付きのツールバー

IgxHierarchicalGrid の子グリッドの実装方法および DI スコープの動作には制限があるため、igx-row-island タグ内でツールバーコンポーネントを定義する場合は、igxGridToolbar ディレクティブとテンプレートの短縮表現を使用します。これにより、子グリッドが独立したツールバーインスタンスを作成することができます。

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        <igx-grid-toolbar *igxGridToolbar>
            <igx-grid-toolbar-title>Child toolbar</igx-grid-toolbar-title>
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>
html

ツールバーテンプレートコンテキストは、各グリッドインスタンスへの参照を暗黙的に公開し、他のバインディング/ロジックに使用できます。以下の例を参照してください。

17.1.0 以前のバージョン

17.1.0 以前のバージョンでは、提供されたグリッドインスタンスを入力プロパティとしてツールバー自体に渡す必要もありました。これにより、テンプレートのスコープ内に常に正しいグリッドインスタンスが含まれるようになります。

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        <!--
            You can name the binding from igxGridToolbar however you want. Just make sure to use
            it inside the template if you need to access the grid instance.
        -->
        <igx-grid-toolbar [grid]="gridRef" *igxGridToolbar="let gridRef">
            <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>
html

機能

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

タイトル

グリッドのツールバーのタイトルを設定するには、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

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

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

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

カスタムコンテンツ

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

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

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

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

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

スタイル設定

ツールバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する 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

デモ

API リファレンス

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

IgxHierarchicalGridComponent イベント:

toolbarExporting

スタイル:

IgxHierarchicalGridComponent スタイル

その他のリソース

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

Angular Hierarchical Grid Toolbar

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