Blazor Tree Grid ツールバー

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

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

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

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

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

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarAdvancedFiltering>
            </IgbGridToolbarAdvancedFiltering>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
            <IgbGridToolbarPinning>
            </IgbGridToolbarPinning>
            <IgbGridToolbarExporter>
            </IgbGridToolbarExporter>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

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

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

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
    </IgbGridToolbar>
</IgbTreeGrid>

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

機能

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

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

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

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

Title (タイトル)

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

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

<IgbGridToolbar>
    <IgbGridToolbarTitle>Grid toolbar title</IgbGridToolbarTitle>
</IgbGridToolbar>

操作

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <!--...-->
    </IgbGridToolbarActions>
</IgbGridToolbar>

列のピン固定

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

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarPinning Title="Grid pinned columns" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarPinning>
    </IgbGridToolbarActions>
</IgbGridToolbar>

列の非表示

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarHiding Title="Grid column hiding" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarHiding>
    </IgbGridToolbarActions>
</IgbGridToolbar>

高度なフィルタリング

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
    </IgbGridToolbarActions>
</IgbGridToolbar>

データのエクスポート

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

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

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

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarExporter ExportCSV="true" ExportExcel="true" Filename="exported_data"></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
</IgbGridToolbar>

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

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

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

<IgbTreeGrid ToolbarExportingScript="ConfigureExport"></IgbTreeGrid>

// In Javascript
igRegisterScript("ConfigureExport", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}, false);

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

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

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

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

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

カスタムコンテンツ

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

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

<IgbTreeGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>title</IgbGridToolbarTitle>
        @*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        *@
        <IgbGridToolbarActions>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

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

スタイル設定

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

<IgbTreeGrid class="grid"></IgbTreeGrid>

次に、そのクラスに関連する 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 です。

その他のリソース

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