Hierarchical Data Grid (階層データグリッド) の概要と構成

Ignite UI for Blazor 階層データグリッドは、階層表形式データの表示と操作に使用されます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイルフィルタリング、ソート、ページング、テンプレート化、列の移動、列のピン固定、Excel および CSV へのエクスポートなどの豊富な機能セットを提供します。階層グリッドは、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。

Blazor 階層データグリッドの例

この Blazor グリッドの例では、ユーザーがデータの階層セットを視覚化し、セルテンプレートを使用して他の視覚的コンポーネントを追加する方法を確認できます。

Ignite UI for Blazor 階層グリッドを使用した作業の開始

依存関係

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

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

また、階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります:

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

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

@using IgniteUI.Blazor.Controls

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

// in Program.cs file

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

Blazor 階層データグリッドの使用

データバインディング

IgbHierarchicalGrid は、IgbGrid から派生し、ほとんどの機能を共有します。主要な違いは階層で複数レベルを定義できることです。IgbRowIsland と呼ばれる IgbHierarchicalGrid の定義内の個別のタグで設定されます。IgbRowIsland コンポーネントは、特定レベルの各子グリッドの設定を定義します。レベルごとの複数行アイランドがサポートされます。階層グリッドで 2 通りのデータバインドがサポートされます。

階層データの使用

アプリケーションが階層データ全体をオブジェクトの子配列を参照するオブジェクトの配列として読み込む場合、階層グリッドを設定して読み込み、自動的にバインドすることができます。以下はプロパティ構造の階層データソースのプロパティの例です。

public class SingersData : List<SingersDataItem>
{
    public SingersData()
    {
        this.Add(new SingersDataItem()
        {
            Artist = "Naomí Yepes",
            Photo = "assets/images/hgrid/naomi.png",
            Debut = "2011",
            GrammyNomination = 6,
            GrammyAwards = 0,
            Tours = new List<ToursItem>() {
            new ToursItem() {
                Tour = "Faithful Tour",
                StartedOn = new DateTime(),
                Location = "Worldwide",
                Headliner = "NO",
                TouredBy = "Naomí Yepes"
            }
           },
            Albums = new List<AlbumItem>() {
            new AlbumItem() {
                Album = "Dream Driven",
                LaunchDate = new DateTime(),
                BillboardReview= "81",
                Artist = "Naomí Yepes",
                Songs = new List<SongItem>() {
                    new SongItem() {
                        Number = "1",
                        Title="Intro",
                        Released = "*",
                        Genre = "Rock",
                        Album ="Dream Driven"
                    }
                }
            }
           }
        });
    }
}

各 IgbRowIsland は、子データを保持するプロパティのキーを指定します。

<IgbHierarchicalGrid Data="SingersData" AutoGenerate="true">
    <IgbRowIsland ChildDataKey="Tours" AutoGenerate="true"></IgbRowIsland>
    <IgbRowIsland ChildDataKey="Albums"AutoGenerate="true">
        <IgbRowIsland ChildDataKey="Songs" AutoGenerate="true"></IgbRowIsland>
    </IgbRowIsland>
</IgbHierarchicalGrid>

[!NOTE] data の代わりにユーザーは、データを自動的に設定するめの読み込みに IgbHierarchicalGrid が必要な childDataKey のみ設定します。

ロードオンデマンドの使用

ほとんどのアプリケーションがはじめに最小限のデータを読み込むようでざいんされているため、結果的に読み込み時間が短くなります。このような場合、IgbHierarchicalGrid を設定してユーザーが作成したサービスでデータのオンデマンドフィードを可能にします。

<IgbHierarchicalGrid Id="hGrid" AutoGenerate="true" PrimaryKey="customerId" Height="600px"
    RenderedScript="OnGridRendered">
    <IgbRowIsland ChildDataKey="Orders" PrimaryKey="orderId" AutoGenerate="true" GridCreatedScript="OnGridCreated">
        <IgbRowIsland ChildDataKey="Details" PrimaryKey="productId" AutoGenerate="true" GridCreatedScript="OnGridCreated"></IgbRowIsland>
    </IgbRowIsland>
</IgbHierarchicalGrid>

In JavaScript
igRegisterScript("OnGridRendered", () => {
    const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
    grid.isLoading = true;
    getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
        (data) => {
            grid.isLoading = false;
            grid.data = data;
            grid.markForCheck();
        });
}, false)

igRegisterScript("OnGridCreated", (args) => {
    const context = args.detail;
    const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders";
    const dataState = {
        key: context.owner.childDataKey,
        parentID: context.parentID,
        parentKey: _parentKey,
        rootLevel: false,
      };
      context.grid.isLoading = true;
      getData(dataState).then((data) => {
        context.grid.isLoading = false;
        context.grid.data = data;
        context.grid.markForCheck();
      });
}, false)

const DATA_URL = `https://data-northwind.indigo.design/`;

function getData(dataState) {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${DATA_URL}${qS}`;
}

行展開インジケーターの表示/非表示

行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、HasChildrenKey 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。

<IgbHierarchicalGrid Data="data" PrimaryKey="ID" HasChildrenKey="hasChildren">
</IgbHierarchicalGrid>

HasChildrenKey プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。

さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、ShowExpandAll プロパティを使用できます。この UI は、パフォーマンス上の理由からデフォルトで無効になっているため、データが大きいグリッドやロードオンデマンドのグリッドで有効にすることはお勧めしません。

機能

グリッド機能を有効にして IgbRowIsland マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランドインスタンスでオプションを変更すると生成した各グリッドで変更されます。

<IgbHierarchicalGrid Data="localData" AutoGenerate="false"
    AllowFiltering="true" Height="600px" Width="800px">
    <IgbColumn Field="ID" Pinned="true" Filterable="true"></IgbColumn>
    <IgbColumnGroup Header="Information">
        <IgbColumn Field="ChildLevels"></IgbColumn>
        <IgbColumn Field="ProductName" HasSummary="true"></IgbColumn>
    </IgbColumnGroup>
    <IgbRowIsland ChildDataKey="childData" AutoGenerate="false" RowSelection="GridSelectionMode.Multiple">
        <IgbColumn Field="ID" HasSummary="true" DataType="number"></IgbColumn>
        <IgbColumnGroup Header="Information2">
            <IgbColumn Field="ChildLevels"></IgbColumn>
            <IgbColumn Field="ProductName"></IgbColumn>
        </IgbColumnGroup>
        <IgbPaginator PerPage="5"></IgbPaginator>
    <IgbRowIsland>
    <IgbPaginator></IgbPaginator>
</IgbHierarchicalGrid>

以下のグリッド機能はグリッドレベルごとに動作するため、各グリッドインスタンスが残りのグリッドとは別に管理します。

ソート
フィルタリング
ページング
複数列ヘッダー
非表示
ピン固定
移動
集計
検索

選択とナビゲーション機能は、Hierarchical Grid 全体でグローバルに作用します。

選択選択は、選択したセルを異なる 2 つの子グリッドで同時に表示することを許可しません。
ナビゲーション ↑ + ↓ へ移動するときに next/prev 要素が子グリッドの場合、ナビゲーションが関連子グリッド内で継続され、関連セルが選択済みにマークされ、フォーカスされます。子セルが現在の表示ビューポート以外にある場合にビューへスクロールされるため、選択したセルが常に表示されます。

「すべて縮小」ボタン

左上の角にある [すべて縮小] ボタンを押して階層グリッドで展開されてる行を縮小できます。更に他のグリッドを含む各子グリッドと階層グリッドにも同様のボタンがあり、階層の特定のグリッドのみ縮小することができます。

スタイル設定

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

 <IgbHierarchicalGrid Class="grid"></IgbHierarchicalGrid>

次に、そのクラスの --header-background および --header-text-color CSS プロパティを設定します:

.grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

サンプル

既知の制限

制限	説明
グループ化	グループ化機能は、階層グリッドでサポートされません。

API リファレンス

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

Hierarchical Data Grid (階層データ グリッド) の概要と構成

Blazor 階層データ グリッドの例