Web Components Hierarchical Grid ツールバー

Ignite UI for Web Components ツールバーは、Web Components Hierarchical Grid の UI 操作用のコンテナーです。Web Components ツールバーは Web Components コンポーネントの一番上、つまり IgcHierarchicalGridComponent にあり、水平方向のサイズと一致します。ツールバー コンテナーは、任意のカスタム コンテンツまたは事前定義された UI コントロールのセットをホストできます。Web Components Hierarchical Grid のデフォルト セットには次のものが含まれます。

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

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

Web Components Toolbar Grid Example

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

<igc-hierarchical-grid id="hGrid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>Hierarchical Grid Toolbar</igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-advanced-filtering><igc-grid-toolbar-advanced-filtering>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

[!Note] 上記のコード スニペットに示されているように、事前定義された Actions UI コンポーネントは IgcGridToolbarActions にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。

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

<igc-hierarchical-grid>
    <igc-grid-toolbar>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

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

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

igc-hierarchical-grid の子グリッドの実装方法および DI スコープの動作には制限があるため、igc-row-island 内でツールバー コンポーネントを定義するには、ToolbarTemplate 入力プロパティを使用します。これにより、子グリッドが独立したツールバー インスタンスを作成することができます。

constructor() {
    var rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
    rowIsland1.toolbarTemplate = this.rowIslandToolbarTemplate;
}

public rowIslandToolbarTemplate = () => {
    return html`<igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-advanced-filtering></igc-grid-toolbar-advanced-filtering>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>`;
}

<igc-hierarchical-grid>
    ...
    <igc-row-island id="rowIsland1">
    </igc-row-island>
</igc-hierarchical-grid>

機能

ツールバーは、グリッド全体に影響を与えるロジック/インタラクションを分離するのに最適です。

上記のように、制御、列の非表示、列のピン固定、高度なフィルタリング、およびグリッドからのデータのエクスポートのためのデフォルトのコンポーネントを提供するように構成できます。

これらの機能は、Ignite UI for Web Components のカード コンポーネントと同様のパターンに従うことで、互いに独立して有効にできます。

以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプル コードです。

Title (タイトル)

グリッドのツールバーのタイトルを設定するには、IgcGridToolbarTitle を使用します。

ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。

<igc-grid-toolbar>
    <igc-grid-toolbar-title>Grid toolbar title</igc-grid-toolbar-title>
</igc-grid-toolbar>

操作

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

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
    <!-- ... -->
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

列のピン固定

IgcGridToolbarPinning は、グリッド内の列のピン固定を操作するためのデフォルトの UI を提供します。

コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            column-list-height="400px">
        </igc-grid-toolbar-pinning>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

列の非表示

IgcGridToolbarHiding は、列非表示を操作するためのデフォルトの UI を提供します。コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするための同じ入力プロパティを公開します。

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            column-list-height="400px">
        </igc-grid-toolbar-hiding>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

高度なフィルタリング

ツールバーの高度なフィルタリング コンポーネントは、高度なフィルタリング機能のデフォルトの UI を提供します。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-advanced-filtering>Custom text for the toggle button</igc-grid-toolbar-advanced-filtering>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

データのエクスポート

[!Note] IgcHierarchicalGridComponent または階層下の子グリッドのいずれかをエクスポートすると、エクスポートされるデータは、それぞれのグリッドに属する行のフラット コレクションになります (子グリッドはエクスポートされたデータに含まれません)。

残りのツールバー操作と同様に、エクスポートは、すぐに使用できる IgcGridToolbarExporter を介して提供されます。

ツールバー エクスポーター コンポーネントは、UI とエクスポート エクスペリエンスの両方をカスタマイズするためのいくつかの入力プロパティを公開します。

これらは、表示テキストの変更から、ドロップダウンのオプションの有効化/無効化、生成されたファイルの名前のカスタマイズまで多岐にわたります。完全なリファレンスについては、ToolbarExporter の API ヘルプを参照してください。

これは、Web Components テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-exporter export-csv="true" export-excel="true" filename="exported_data">
        </igc-grid-toolbar-exporter>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

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

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

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

<igc-hierarchical-grid id="hierarchicalGrid"></igc-hierarchical-grid>

constructor() {
    var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    hierarchicalGrid.addEventListener("toolbarExporting", this.configureExport);
}

public configureExport(evt: CustomEvent<IgcGridToolbarExportEventArgs>) {
    const args = evt.detail;
    const options: IgcExporterOptionsBase = args.options;
    if (options) {
        options.fileName = `Report_${new Date().toDateString()}`;
        (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
            columnArgs.cancel = columnArgs.header === 'Photo';
        });
    }
}

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

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

デフォルトのツールバー エクスポーター コンポーネントを使用する場合、エクスポート操作が行われると、操作の進行中にツールバーに進行状況インジケーターが表示されます。

さらに、ユーザーはツールバーの ShowProgress プロパティを設定して、自分の長時間実行操作に使用するか、グリッドで実行されている操作を示す別の方法として使用できます。

以下のサンプルでは、プログレス バーが表示されるようにデータのエクスポートに必要な時間を増やすために、大量のデータを使用しています。さらに、グリッドで長時間実行される操作をシミュレートする別のボタンがあります。

カスタム コンテンツ

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

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

<igc-hierarchical-grid id="grid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>title</igx-grid-toolbar-title>
        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <igc-grid-toolbar-actions>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

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

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}

デモ

API リファレンス

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

• IgcGridToolbarAdvancedFiltering

• IgcGridToolbar

• IgcGridToolbarExporter

• IgcGridToolbarHiding

• IgcGridToolbarPinning

• IgcGridToolbarTitle

• IgcHierarchicalGridComponent イベント:

• ToolbarExporting

その他のリソース

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)