React 트리 그리드 셀 병합

    Ignite UI for React 트리 그리드는 동일한 값을 가진 두 개 이상의 인접한 셀을 하나의 더 큰 셀로 결합하는 셀 병합 기능을 제공합니다. 병합은 열 내에서 세로로 적용되며 중복 값을 줄여 가독성을 향상시키는 데 도움이 됩니다. 이 기능은 기본적으로 일치하는 데이터 값에 의해 또는 사용자 지정 조건을 적용하여 셀을 병합하도록 구성할 수 있습니다.

    React Tree Grid Cell Merging Example

    Enabling and Using Cell Merging

    그리드의 셀 병합은 다음 두 가지 수준에서 제어됩니다.

    • 그리드 수준 병합 모드 – 병합이 적용되는 시기를 결정합니다.
    • 열 수준 병합 토글 – 셀을 병합할 수 있는 열을 결정합니다.

    Grid Merge Mode

    격자는 열거실cellMergeMode에서 값을 받아들이는 속성을 드러냅GridCellMergeMode 니다:

    • always- 정렬 상태와 상관없이 병합 조건을 충족하는 인접 셀들을 병합합니다.
    • onSort- 열이 정렬될 때만 인접한 셀을 병합합니다 (기본값).​
    <IgrTreeGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrTreeGrid>

    const cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

    열 수준에서는 속성과merge 병합을 활성화하거나 비활성화할 수 있습니다.

    <IgrColumn field="OrderID" merge={true}></IgrColumn>
<IgrColumn field="ShipperName" merge={false}></IgrColumn>

    위의 예에서:

    • The OrderID column will merge adjacent duplicate values.
    • ​ShipperName 열은 병합되지 않고 정상적으로 렌더링됩니다.

    Combined Example

    <IgrTreeGrid data={data} cellMergeMode={cellMergeMode} autoGenerate={false}>
    <IgrColumn field="OrderID" header="Order ID" merge={true}></IgrColumn>
    <IgrColumn field="ShipperName" header="Shipper Name" merge={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Salesperson"></IgrColumn>
</IgrTreeGrid>

    const cellMergeMode: GridCellMergeMode = 'onSort';

    여기서 표는 열이 정렬될 때만 병합되도록 설정되며 범주 및 제품 열이 모두 병합되도록 구성됩니다.

    Custom Merge Conditions

    내장된 모드always와onSort 모드 외에도, 그리드는 속성을 통해mergeStrategy 셀을 병합하는 데 대한 맞춤 조건을 정의할 수 있게 해줍니다. 이 전략은 셀 비교 방식과 병합된 범위 계산 방식을 모두 제어합니다.

    Merge Strategy Class

    커스텀 머지 전략은 다음IgrGridMergeStrategy 클래스를 구현해야 합니다:

    • merge- 병합된 셀이 어떻게 생성되는지를 정의합니다.
    • comparer- 인접한 두 레코드를 병합할지 결정하는 조건을 정의합니다.

    인터페이스IgrTreeGrid는 다음과 같은 두 가지 내장 전략IGridMergeStrategy을 제공합니다:IgrDefaultTreeGridMergeStrategy 그리고IgrByLevelTreeGridMergeStrategy​IgrDefaultTreeGridMergeStrategy 계층적 수준에 관계없이 동일한 값을 가진 모든 셀을 병합합니다. 반면,IgrByLevelTreeGridMergeStrategy 셀은 값이 같고 같은 수준에 있을 때만 병합하므로, 병합에 필요한 조건이 레벨입니다.

    Extending the Default Strategy

    동작의 일부(예: 비교 로직)만 커스터마이징하고 싶다면, 내장 전략IgrDefaultTreeGridMergeStrategy​IgrByLevelTreeGridMergeStrategy 중 하나를 확장하고 관련 메서드를 덮어쓸 수 있습니다.

    export class MyCustomStrategy extends IgrDefaultTreeGridMergeStrategy {
    /* 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;
    }
}

    Applying a Custom Strategy

    정의가 끝나면, 다음 속성을 통해mergeStrategy 그리드에 전략을 할당합니다:

    <IgrTreeGrid data={data} mergeStrategy={customStrategy}>
  <IgrColumn field="ActionID" merge={true}></IgrColumn>
  <IgrColumn field="ProjectName" merge={true}></IgrColumn>
</IgrTreeGrid>

    Feature Integration

    병합된 셀의 특정 동작으로 인해 그리드의 다른 기능 중 일부와 정확히 어떻게 연결되는지 주목해야 합니다.

    • Excel 내보내기: 병합된 셀은 Excel로 내보낼 때 병합된 상태로 유지됩니다.
    • 열 고정: 열이 고정될 때 셀은 병합된 상태로 유지되고 고정된 영역에 표시됩니다.
    • 행 고정: 셀은 포함된 영역 내에서만 병합됩니다(즉, 고정된 행의 셀은 고정된 다른 행의 셀과만 병합되는 반면, 고정되지 않은 행의 셀은 고정되지 않은 행의 셀과만 병합됩니다.
    • 업데이트/편집: 활성화하면 병합 시퀀스가 중단되므로 단일 셀만 편집 모드에 있습니다.
    • 행 선택: 선택한 행이 병합된 셀과 교차하는 경우 관련된 모든 병합된 셀을 선택의 일부로 표시해야 합니다.
    • 탐색/활성화: 셀이 활성화되면 동일한 행의 병합된 모든 셀이 단일 셀이 됩니다. 여기에는 키보드 탐색을 통한 활성화도 포함됩니다.

    [!NOTE] If a merged cell is clicked, the closest cell from the merge sequence will become active.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.