Premium

Blazor Tree Grid (ツリーグリッド) の概要と構成

Blazor Tree Grid は、データグリッド (テーブル) の機能とツリービューを組み合わせた UI コンポーネントで、階層データを表形式で簡単に表示できます。通常のグリッドとは異なり、ツリーグリッドでは行を展開または縮小することができ、親行の下にネストされた子行を表示可能です。そのため、ファイルエクスプローラー、組織図、プロジェクトタスク、製品カテゴリなどの構造化データを表現する際に便利です。

Ignite UI for Blazor ツリーグリッドは、階層データまたはフラットデータを簡単に表示および操作できます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイルフィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。マテリアルテーブルをベースとした UI ツリーグリッドにより、表形式のデータの表示がさらに簡単できれいになりました。

Blazor ツリーグリッドの例

この例では、ユーザーが階層データまたはフラットデータを操作する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel と csv へのエクスポートが含まれています。

例

Ignite UI for Blazor Tree Grid で作業を開始

依存関係

Blazor Grid ライブラリ、特に Blazor Tree Grid の使用を開始することは、階層情報を明確かつインタラクティブに表示する強力なデータ駆動型アプリケーションを構築する最初のステップです。Blazor Tree Grid を使用して、親子構造のデータを慣れ親しんだ表形式で表示でき、行の展開、ソート、フィルタリング、編集、大規模データセットに対応した仮想化などの機能を備えています。

Blazor ツリーグリッドを初期化するには、IgniteUI.Blazor パッケージをインストールする必要があります。

IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。

以下の名前空間を追加してコントロールの実装を開始できます。

ツリーグリッドを使用するには、次のインポートも含める必要があります:

対応するスタイルも参照する必要があります。テーマの 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:

<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />

またはそれをリンクするには:

@using IgniteUI.Blazor.Controls

コンポーネントモジュール

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule));

使用方法

ツリーグリッドはグリッドと多くの機能を共有していますが、データを階層的に表示する機能も追加されています。ツリーグリッドは、各データオブジェクトの子コレクションまたは各データオブジェクトにプライマリキーまたは外部キーを使用してデータオブジェクト内の関係を定義できます。

ツリーセル

ツリーグリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリーグリッドの行は 2 タイプのセルで構成されます。

GridCell - 値を含む標準セル。
TreeGridCell - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリーセル。行コンポーネントのレベルは、その内部の treeRow の level プロパティを通じてアクセスできます。

各行にはツリーセルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。

初期展開時の深さ

初期時のツリーグリッドは、すべてのノードレベルを展開して表示します。この動作は ExpansionDepth プロパティを使用して構成できます。デフォルトの値は Infinity ですべてのノードが展開されます。初期時の展開の深さは、このプロパティを数値に設定して制御できます。たとえば、0 はルートレベルのノードのみを表示し、1 はルートレベルと子ノードを表示します。

子コレクション

child collection オプションを使用して各データオブジェクトは子コレクションを含み、親データオブジェクトとして同じタイプの項目で生成します。これによりツリーグリッドの各レコードがその子への直接の参照を持つことができます。元のデータソースを含むツリーグリッドの data プロパティが階層が定義されたコレクションになります。

このサンプルでは、コレクションストラクチャを使用します。

public class EmployeesNestedDataItem
{
    public double ID { get; set; }
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public List<EmployeesItem> Employees { get; set; }
}
public class EmployeesItem
{
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
}

それでは、Data コレクションをインポートし、それをツリーグリッドにバインドすることから始めましょう。

 <IgbTreeGrid
    AutoGenerate="false"
    ChildDataKey="Employees"
    Data="EmployeesNestedData"
    Name="treeGrid"
    @ref="treeGrid">
        <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="Age" DataType="GridColumnDataType.Number"> </IgbColumn>
</IgbTreeGrid>

ツリーグリッドで階層を構築するには、その childDataKey プロパティに、各データオブジェクトで使用される子コレクションの名前を設定する必要があります。このサンプルでは Employees コレクションです。更に自動列生成を無効にしてデータオブジェクトの実際のプロパティとの一致を手動で定義できます。Employees コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。

ツリーグリッドにおいて、RowSelection を使用し、IgbPaginator 要素を追加することで、行選択機能とページング機能を有効にできるようになりました。最初の列に集計機能、各列にはフィルタリング、ソート、編集、サイズ変更機能を有効にします。

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true HasSummary=true> </IgbColumn>
    <IgbPaginator></IgbPaginator>
</IgbTreeGrid>

最後に、IgbGridToolbar、IgbGridToolbarHiding、IgbGridToolbarPinning、IgbGridToolbarExporter をそれぞれ使用して、列の非表示、列のピン固定、エクスポート機能、およびツリーグリッドのツールバーを有効にできます。

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true > </IgbColumn>
    <IgbPaginator></IgbPaginator>
    <IgbGridToolbar>
        <IgbGridToolbarTitle> Employees </IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
            <IgbGridToolbarExporter></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

上記のコードの結果は、この記事の冒頭のツリーグリッドの例セクションで確認できます。

プライマリと外部キー

プライマリと外部キーオプションを使用した際に各データオブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータオブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータソースを含むツリーグリッドの data プロパティがフラットコレクションになります。

public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

上記のサンプルデータでは、すべてのレコードに ID、ParentID、および Name、JobTitle、Age などの追加プロパティがあります。前述のように、レコードの ID は一意である必要があります。これが PrimaryKey になります。ParentID には親ノードの ID が含まれており、ForeignKey として設定できます。行にツリーグリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。

親子関係は、ツリーグリッドの PrimaryKey プロパティと ForeignKey プロパティを使用して構成されます。

上記フラットコレクションで定義されたデータを表示するツリーグリッドを設定する方法を示すコンポーネントのテンプレートです。

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             Name="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number"></IgbColumn>
</IgbTreeGrid>

さらに、rowSelection プロパティを使用してツリーグリッドの行選択機能を有効にし、各列のフィルタリング、ソート、編集、移動、サイズ変更機能も有効にします。

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
             Name="treeGrid"
             @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true> </IgbColumn>
</IgbTreeGrid>

以下は結果です:

パーシステンスとインテグレーション

ツリーグリッドセルのインデントは、フィルタリング、ソート、ページングなど他のツリーグリッド全体の機能で永続化されます。

Sorting が列に適用された際にデータ行がレベルごとにソートされます。ルートレベルの行はそれぞれの子に関係なく個々に並べ替えられます。各子コレクションは個々に並べ替えられます。
最初の列 (VisibleIndex が 0 の列) は常にツリー列です。
列のピン固定、列の非表示、列の移動などの処理後に VisibleIndex が 0 になる列はツリー列になります。
エクスポートした Excel ワークシートは、ツリーグリッドでグループ化されるときにレコードをグループ化して階層に反映できます。すべてのレコードを展開した状態が保持および反映されます。
CSV レベルにエクスポートする際に展開した状態は無視されてすべてのデータがフラットでエクスポートされます。

Blazor ツリーグリッドスタイル設定の構成

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

<IgbTreeGrid Class="tree-grid">

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

<igc-tree-grid class="tree-grid">

API リファレンス

IgbTreeGrid
IgbColumn
IgbGridToolbar
IgbGridRow

その他のリソース

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

Blazor Tree Grid (ツリー グリッド) の概要と構成

Blazor ツリー グリッドの例

例