React Tree Grid ツールバー

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

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

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

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

The predefined IgrGridToolbarActions and IgrGridToolbarTitle UI components are added inside the IgrTreeGrid.toolbar and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
            Tree Grid Toolbar
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions>
            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning></IgrGridToolbarPinning>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
            <IgrGridToolbarExporter></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>

Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:

<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
    </IgrGridToolbar>
</IgrTreeGrid>

For a comprehensive look over each of the default UI components, continue reading the Features section below.

React Toolbar Grid Example

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

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

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

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

IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動作には特定の制限があるため、子グリッドのスコープでツールバーを使用する場合は注意が必要です。 igx-row-island タグ内でツールバー コンポーネントを定義するときは、必ず IgxGridToolbar を使用し、提供されたグリッド インスタンスを入力プロパティとしてツールバー自体に渡すようにしてください。 これにより、テンプレートのスコープ内に常に正しいグリッド インスタンスが含まれるようになります。

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

<IgrGridToolbar>
    <IgrGridToolbarTitle>
        Grid toolbar title
    </IgrGridToolbarTitle>
</IgrGridToolbar>

機能

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

<IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>

Title (タイトル)

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

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

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarPinning title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
    </IgrGridToolbarActions>
</IgrGridToolbar>

操作

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

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarHiding title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
    </IgrGridToolbarActions>
</IgrGridToolbar>

列のピン固定

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

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
    </IgrGridToolbarActions>
</IgrGridToolbar>

列の非表示

As with the rest of the toolbar actions, exporting is provided through a IgrGridToolbarExporter out of the box.

The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience.

These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter.

Here is a snippet showing some of the options which can be customized through the React template:

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarExporter exportCSV={true} exportExcel={true} filename="exported_data"></IgrGridToolbarExporter>
    </IgrGridToolbarActions>
</IgrGridToolbar>

In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:

const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
    const args = evt.detail;
    const options: IgrExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;
    (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}

<IgrTreeGrid onToolbarExporting={configureExport}>
</IgrTreeGrid>

The following sample demonstrates how to customize the exported files:

高度なフィルタリング

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

Moreover, users can set the toolbar ShowProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid:

データのエクスポート

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

<IgrTreeGrid>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
           Custom Title
        </IgrGridToolbarTitle>
        {/*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        */}
        <IgrGridToolbarActions>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>

エクスポート コンポーネントは、ターゲット データ形式 (IgrExcelExporterService および CSVExporterService) のそれぞれのサービスを使用しています。つまり、それぞれのサービスが依存関係挿入チェーンを通じて提供されない場合、コンポーネントは何もエクスポートできません。

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

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

<IgrTreeGrid className="grid"></IgrTreeGrid>

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

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

カスタム コンテンツ

API リファレンス

• Ignite UI for React Forums
• Ignite UI for React GitHub