Premium

Web Components Hierarchical Grid セル結合

Ignite UI for Web Components Hierarchical Grid には、同じ値を持つ隣接セルを 1 つの大きなセルに結合するセル結合機能があります。結合は列内で縦方向に適用され、重複する値を減らして可読性を向上させます。既定ではデータ値の一致でセル結合されるほか、カスタム条件を設定して結合するように構成できます。

Web Components Hierarchical Grid セル結合の例

セル結合の有効化と使用

グリッドでのセル結合は、以下の 2 つのレベルで制御されます:

グリッドレベルの結合モード - 結合がいつ適用されるかを決定
列レベルの結合トグル - どの列でセルを結合できるかを決定

グリッド結合モード

グリッドは、GridCellMergeMode 列挙型の値を受け入れる CellMergeMode プロパティを公開します。

always - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
onSort - 列がソートされているときのみ隣接セルを結合 (デフォルト値)。

<igc-hierarchical-grid cell-merge-mode="always">
    ...
</igc-hierarchical-grid>

列結合のトグル

列レベルでは、merge プロパティで結合の有効または無効を切り替えます。

<igc-column field="OrderID" merge="true"></igc-column>
<igc-column field="ShipperName" merge="false"></igc-column>

上記の例では:

OrderID 列は、隣接する重複値を結合します。
ShipperName 列は、結合を行わず通常通りに描画されます。

組み合わせた例

<igc-hierarchical-grid cell-merge-mode="onSort" auto-generate="false">
    <igc-column field="OrderID" header="Order ID" merge="true"></igc-column>
    <igc-column field="ShipperName" header="Shipper Name" merge="false"></igc-column>
    <igc-column field="Salesperson" header="Salesperson"></igc-column>
</igc-hierarchical-grid>

この例では、グリッドは列がソートされている場合のみ結合を行い、Category 列と Product 列の両方で結合が有効になっています。

カスタム結合条件

always と onSort の組み込みモードに加えて、MergeStrategy プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。

結合ストラテジクラス

カスタム結合ストラテジは IgcGridMergeStrategy クラスを実装する必要があります:

export declare class IgcGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;
}

merge - 結合されたセルをどのように生成するかを定義。
comparer - 隣接するレコードを結合すべきかを判定する条件を定義。

デフォルトのストラテジを拡張

一部の動作 (例: comparer ロジック) のみをカスタマイズしたい場合は、組み込みの IgcDefaultMergeStrategy を拡張し、必要なメソッドのみをオーバーライドできます。

export class MyCustomStrategy extends IgcDefaultMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

カスタムストラテジの適用

定義したカスタムストラテジは、MergeStrategy プロパティを通じてグリッドに割り当てます:

constructor() {
    const grid = (this.grid = document.getElementById('grid') as IgcGridComponent);

    grid.data = this.data;
    grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy;
    grid.cellMergeMode = 'always';
}

デモ

機能の統合

結合されたセルには特有の動作があるため、グリッドの他の機能と具体的にどのように連携するかに注意が必要です:

Excel エクスポート: 結合されたセルは、Excel にエクスポートしても結合された状態を維持します。
列のピン固定: 列がピン固定されている場合でも、セルは結合された状態を維持し、ピン固定領域に表示されます。
行のピン固定: セルは、それぞれが属する領域内でのみ結合されます。つまり、ピン固定された行のセルは他のピン固定された行のセルとのみ結合され、ピン固定されていない行のセルはピン固定されていない行のセルとのみ結合されます。
更新/編集: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
行の選択: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。
ナビゲーション/アクティブ化: セルがアクティブになると、同じ行内の結合されたセルはすべて単一のセルになります。つまり、結合シーケンスが解除されます。これには、キーボードナビゲーションによるアクティブ化も含まれます。

結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。

API リファレンス

IgcHierarchicalGrid CellMergeMode GridCellMergeMode IgcGridMergeStrategy IgcDefaultMergeStrategy

その他のリソース

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

Web Components Hierarchical Grid セル結合