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 プロパティを使用すると、グループを階層化できます。デフォルトで、追加された各グループの説明が集計されます。GroupHeaderDisplayModeSplit に設定すると、IgbDataGridGroupDescriptions プロパティで定義されたグループのセクション ヘッダーが作成されます。

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

    縮小可能なグループ

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

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

    まとめ

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

    <IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
        DataSource="DataSource"
        GroupHeaderDisplayMode="DataSourceSectionHeaderDisplayMode.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 = "" };
            var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };
    
            this.DataGridRef.GroupDescriptions.Add(state);
            this.DataGridRef.GroupDescriptions.Add(city);
            this.DataGridRef.GroupDescriptions.Add(income);
        }
    }