Blazor Hierarchical Grid セル結合
Ignite UI for Blazor Hierarchical Grid には、同じ値を持つ隣接セルを 1 つの大きなセルに結合するセル結合機能があります。結合は列内で縦方向に適用され、重複する値を減らして可読性を向上させます。
Blazor Hierarchical Grid セル結合の例
セル結合の有効化と使用
グリッドでのセル結合は、以下の 2 つのレベルで制御されます:
- グリッド レベルの結合モード - 結合がいつ適用されるかを決定
- 列レベルの結合トグル - どの列でセルを結合できるかを決定
グリッド結合モード
グリッドは、GridCellMergeMode 列挙型の値を受け入れる CellMergeMode プロパティを公開します。
always- ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。onSort- 列がソートされているときのみ隣接セルを結合 (デフォルト値)。
<IgbHierarchicalGrid Data="Data" CellMergeMode="CellMergeMode" >
...
</IgbHierarchicalGrid>
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.Always;
}
列結合のトグル
列レベルでは、merge プロパティで結合の有効または無効を切り替えます。
<IgbColumn Field="OrderID" Merge="true"></IgbColumn>
<IgbColumn Field="ShipperName" Merge="false"></IgbColumn>上記の例では:
- OrderID 列は、隣接する重複値を結合します。
- ShipperName 列は、結合を行わず通常通りに描画されます。
組み合わせた例
<IgbHierarchicalGrid Data="Data" CellMergeMode="CellMergeMode" AutoGenerate="false">
<IgbColumn Field="OrderID" Header="Order ID" Merge="true"></IgbColumn>
<IgbColumn Field="ShipperName" Header="Shipper Name" Merge="true"></IgbColumn>
<IgbColumn Field="Salesperson" Header="Salesperson"></IgbColumn>
</IgbHierarchicalGrid>
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.OnSort;
}
この例では、グリッドは列がソートされている場合のみ結合を行い、Category 列と Product 列の両方で結合が有効になっています。
機能の統合
結合されたセルには特有の動作があるため、グリッドの他の機能と具体的にどのように連携するかに注意が必要です:
- Excel エクスポート: 結合されたセルは、Excel にエクスポートしても結合された状態を維持します。
- 列のピン固定: 列がピン固定されている場合でも、セルは結合された状態を維持し、ピン固定領域に表示されます。
- 行のピン固定: セルは、それぞれが属する領域内でのみ結合されます。つまり、ピン固定された行のセルは他のピン固定された行のセルとのみ結合され、ピン固定されていない行のセルはピン固定されていない行のセルとのみ結合されます。
- 更新/編集: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
- 行の選択: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。
- ナビゲーション/アクティブ化: セルがアクティブになると、同じ行内の結合されたセルはすべて単一のセルになります。つまり、結合シーケンスが解除されます。これには、キーボード ナビゲーションによるアクティブ化も含まれます。
結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。
API リファレンス
IgbHierarchicalGrid
CellMergeMode
GridCellMergeMode
IgbGridMergeStrategy
IgbDefaultMergeStrategy
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。