Blazor Grid グループ化

    Blazor IgbGrid の Ignite UI for Blazor グループ化動作は、列の値に基づいてグループ化されたデータ行を作成します。IgbGrid の グループ化では、グループを階層構造で視覚化できます。グループデータ行は展開または縮小でき、グループの順序は UI または API で変更できます。行選択を有効にすると、グループ化行セレクターがグループ行の一番左の領域に描画されます。RowSelection プロパティが単一に設定されている場合、チェックボックスは無効になり、選択が行われるグループの表示としてのみ機能します。RowSelection プロパティが複数に設定されている場合、グループ化行セレクターをクリックすると、このグループに属するすべてのレコードが選択されます。

    Blazor Grid グループ化の例

    この例は、大量のデータのグループ化が可能であることを示しています。列ヘッダーを一番上 (グループ化領域) にドラッグすると、ユーザーは選択した列のデータを階層構造で表示できます。さらに列ヘッダーを一番上にドラッグすることで、複数のフィールドでグループ化できます。これらのグループ化オプションは、ユーザーが多数の行と列を持つテーブルがあり、はるかに高速で視覚的に受け入れられる方法でデータを表示ようとする場合に役立ちます。

    初期のグループ化状態

    グリッドの GroupingExpressions プロパティに式の配列を割り当てることによって、グリッドの初期グループ化を定義することができます。

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1"></IgbGrid>
    
    @code {
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
    }
    

    グループ式は、ISortingExpression インターフェイスを実装します。

    Group By API

    グループ化 API

    グループ化は、UI およびグリッド コンポーネントで公開された API で実行できます。各列の Groupable プロパティを true に設定してエンドユーザーは特定の列でグリッド データをグループ化できます。

    <IgbGrid AutoGenerate="false" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1" GroupRowTemplateScript="WebGridGroupByRowTemplate">
        <IgbColumn Field="OrderID" Hidden="true"></IgbColumn>
        <IgbColumn Field="ShipCountry" Header="Ship Country" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="PostalCode" Header="Postal Code" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="Discontinued" Width="200px" DataType="GridColumnDataType.Boolean" Groupable="true" BodyTemplateScript="WebGridBooleanCellTemplate" Name="column1" @ref="column1"></IgbColumn>
        <IgbColumn Field="ShipName" Header="Ship Name" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="ShipCity" Header="Ship City" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="ShipperName" Header="Shipper Name"Width="200px"Groupable="true"></IgbColumn>
        <IgbColumn Field="Salesperson" Header="Sales Person" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="UnitPrice" Header="Unit Price" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="Quantity" Width="200px" Groupable="true"></IgbColumn>
    </IgbGrid>
    

    ランタイムの式は groupingExpressions プロパティの取得または設定できます。既存の式を追加または変更する必要がある場合、単一の式または式の配列で GroupBy メソッドを使用してください。

    @code {
        public IgbGrid grid;
    
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
    
    
        private void GroupGrid()
        {
            this.grid.GroupBy(GroupingExpression1);
        }
    }
    

    展開 / 縮小 API

    グループ式の他にグループ行の展開も制御できます。これらは、IgbGroupByExpandState のコレクションである、IgbGrid コンポーネントの別のプロパティ GroupingExpansionState に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は IgbGroupByKey の階層配列です。

    GroupingExpressionsIGroupByExpandState のリストを直接 GroupingExpansionState に設定すると展開が変更されます。また、IgbGrid は、グループ レコード インスタンスまたは行の expanded プロパティによってグループを切り替えるメソッド toggleGroup を公開します。

    <IgbGrid AutoGenerate="true" Data="InvoicesData" GroupingExpressions="GroupingExpression1" GroupingExpansionState=ExpansionState @ref="grid" Id="grid">
    </IgbGrid>
    
    @code {
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
        public IgbGroupByExpandState[] state = new IgbGroupByExpandState[1]
        {
            new IgbGroupByExpandState(){ Hierarchy = new IgbGroupByKey[1]{ new IgbGroupByKey() { FieldName="ShipCountry", Value = "USA" } },  Expanded = false }
        };
    }
    

    グループは展開済み (デフォルト) または縮小済みに作成でき、展開状態は一般的にデフォルト動作の反対の状態のみ含みます。グループを作成して展開するかどうか、または GroupsExpanded プロパティを介すかどうかを制御できます。

    グループですべての行を選択 / 選択解除 API

    グループ内のすべての行の選択/選択解除は、SelectRowsInGroup および DeselectRowsInGroup API メソッドを介して利用できます。

    以下のコードスニペットは、グループ レコード SelectRowsInGroup メソッドを使用してグループ内のすべての行を選択するために使用できます。さらに、このメソッドの2番目のパラメーターはブールプロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。

    var row = await this.grid.GetRowByIndexAsync(0);
    this.grid.SelectRowsInGroup(row.GroupRow, true);
    

    プログラムでグループ内のすべての行の選択を解除する必要がある場合は、DeselectRowsInGroup メソッドを使用できます。

    var row = await this.grid.GetRowByIndexAsync(0);
    this.grid.DeselectRowsInGroup(row.GroupRow);
    

    テンプレート

    グループ行テンプレート

    展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは IgbGroupByRecord です。

    たとえば、以下のテンプレートはグループ行集計でより詳細な情報を表示します。

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupRowTemplateScript="WebGridGroupByRowTemplate"></IgbGrid>
    
    
    //In JavaScript:
    igRegisterScript("WebGridGroupByRowTemplate", (ctx) => {
        var html = window.igTemplating.html;
        var groupRow = ctx.implicit;
        return html`<span>Total items with value: ${groupRow.value} are ${groupRow.records.length}</span>`;
    }, false);
    

    グループ行セレクター テンプレート

    上記のように、展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。カスタムの GroupBy 行セレクター テンプレートを作成するには、GroupByRowSelectorTemplate ディレクティブを使用します。テンプレートから、Group By 行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。

    SelectedCount プロパティは、現在選択されているグループ レコードの数を示し、TotalCount はグループに属するレコードの数を示します。

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
    //In Javascript
    igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
    }, false);
    

    GroupRow プロパティは、グループ行への参照を返します。

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
    //In Javascript
    igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
        var html = window.igTemplating.html;
        var groupRow = ctx.implicit.groupRow;
        return html`<div onclick="handleGroupByRowSelectorClick()">Handle groupRow</div> `;
    }, false);
    

    SelectedCountTotalCount プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。

    Blazor Grid ページングによるグループ化

    グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。展開または折りたたみ操作を行うと、ページングでページ数が再計算され、必要に応じてページ インデックスが調整されます。 複数のページにまたがるグループは、ページ間で分割されます。グループ行は、開始ページでのみ表示され、後続のページでは繰り返されません。グループ行の要約情報はグループ全体に基づいて計算され、ページングの影響を受けません。

    Blazor ページングによるグループ化の例

    集計でグループ化

    グループ化と要約の統合については、集計トピックで説明しています。

    キーボード ナビゲーション

    グループ UI は、以下のキーボード インタラクションをサポートします。

    • グループ行 (行または展開/縮小セルにフォーカス)

      • ALT + 右矢印 - グループを展開します。
      • ALT + 左矢印 - グループを縮小します。
      • SPACE - rowSelection プロパティが multiple に設定されている場合、グループ内のすべての行を選択します。
    • グループ領域の IgbChip コンポーネントのグループ化 (チップにフォーカス)

      • SHIFT + 左矢印 - フォーカスしたチップの左へ移動し、可能な場合はグループ順序を変更します。
      • SHIFT + 右矢印 - フォーカスしたチップの右へ移動し、可能な場合はグループ順序を変更します。
      • SPACE - ソートの方向を変更します。
      • DELETE - フィールドのグループ解除。
      • チップの別の要素をフォーカスでき ENTER キーでインタラクティブに操作できます。

    スタイル設定

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

    <IgbGrid Class="grid"></IgbGrid>
    

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

    .grid {
        --ig-grid-group-row-background: #969799;
        --ig-grid-group-row-selected-background: #969799;
        --ig-grid-group-label-column-name-text: #f8f8f8;
        --ig-grid-group-label-text: #f8f8f8;
        --ig-grid-group-count-text-color: #222;
        --ig-grid-expand-icon-color: #f8f8f8;
        --ig-grid-expand-icon-hover-color: #f8f8f8;
    }
    

    デモ

    既知の問題と制限

    制限 説明
    グループ列の最大値は 10 です。 10 列以上の場合はエラーがスローされます。

    API リファレン

    その他のリソース

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