[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータグリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Blazor 行のグループ化

Ignite UI for Blazor Data Table / Data Grid は、行を「固定ヘッダー」行グループにまとめることができます。これ機能は Microsoft Outlook の Group By 機能に似ています。独自の基準に基づいてデータを視覚的にグループ化する簡単な方法です。

Blazor 行の GroupBy 領域の例

Group-By 領域

上記の例に示すように、DataGrid の IsGroupByAreaVisible プロパティをユーザーインターフェイスで True に設定します。group-by 領域を使用すると、ユーザーは、DataGrid を間接的に操作するときに、操作せずに列をグループ化およびソートオプションを増やすことができます。グループは、ユーザーのニーズに基づいて配置および並べ替えることができます。この領域は、DataGrid で列がプログラムで GroupDescriptions として追加されたときにも入力されます。

グループ化説明の使用の例

階層グループ

GroupHeaderDisplayMode プロパティを使用すると、グループを階層化できます。デフォルトで、追加された各グループの説明が集計されます。GroupHeaderDisplayMode を Split に設定すると、IgbGrid の GroupDescriptions プロパティで定義されたグループのセクションヘッダーが作成されます。

<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split" />

縮小可能なグループ

また、IgbGrid は各グループセクションに切り替えを表示して、エンドユーザーが IsGroupCollapsable プロパティでグループ化されたデータを展開または縮小できます。

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    IsGroupCollapsable="true" />

まとめ

上記すべてのコードスニペットを以下のコードブロックにまとめて、プロジェクトに簡単にコピーできます。

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split"
    IsGroupCollapsable="true" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            OnGridCreated();
            StateHasChanged();
        }
    }

    private void OnGridCreated()
    {
        var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" };
        var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" };
        var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };

        this.DataGridRef.GroupDescriptions.Add(state);
        this.DataGridRef.GroupDescriptions.Add(city);
        this.DataGridRef.GroupDescriptions.Add(income);
    }
}