React Fusión de celdas de cuadrícula de árbol

    La cuadrícula de árbol Ignite UI for React proporciona una función de combinación de celdas que combina dos o más celdas adyacentes con el mismo valor en una sola celda más grande. La combinación se aplica verticalmente dentro de una columna y ayuda a mejorar la legibilidad al reducir los valores duplicados. La función se puede configurar para combinar celdas de forma predeterminada haciendo coincidir valores de datos o aplicando una condición personalizada.

    React Tree Grid Cell Merging Example

    Enabling and Using Cell Merging

    La fusión de celdas en la cuadrícula se controla en dos niveles:

    • Modo de fusión a nivel de cuadrícula: determina cuándo se aplica la combinación.
    • Alternancia de combinación de nivel de columna: determina qué columnas pueden combinar celdas.

    Grid Merge Mode

    The grid exposes a cellMergeMode property that accepts values from the GridCellMergeMode enum:

    • always - Merges any adjacent cells that meet the merging condition, regardless of sort state.
    • onSort - Merges adjacent cells only when the column is sorted (default value).
    <IgrTreeGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrTreeGrid>

    const cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

    At the column level, merging can be enabled or disabled with the merge property.

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

    En el ejemplo anterior:

    • The OrderID column will merge adjacent duplicate values.
    • La columna ShipperName se representará normalmente sin combinarse.

    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';

    Aquí, la cuadrícula está configurada para combinarse solo cuando se ordenan las columnas y las columnas Categoría y Producto están configuradas para la combinación.

    Custom Merge Conditions

    In addition to the built-in always and onSort modes, the grid allows you to define a custom condition for merging cells through the mergeStrategy property. This strategy controls both how cells are compared and how merged ranges are calculated.

    Merge Strategy Class

    A custom merge strategy must implement the IgrGridMergeStrategy class:

    • merge - defines how merged cells are produced.
    • comparer - defines the condition to decide if two adjacent records should be merged.

    The IgrTreeGrid provides two built-in strategies that implement the IGridMergeStrategy interface: IgrDefaultTreeGridMergeStrategy and IgrByLevelTreeGridMergeStrategy. IgrDefaultTreeGridMergeStrategy merges all cells with the same value, regardless of their hierarchical level. In contrast, IgrByLevelTreeGridMergeStrategy only merges cells if they have the same value and are located at the same level, making level a required condition for merging.

    Extending the Default Strategy

    If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either IgrDefaultTreeGridMergeStrategy or IgrByLevelTreeGridMergeStrategy, and override the relevant methods.

    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

    Once defined, assign the strategy to the grid through the mergeStrategy property:

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

    Feature Integration

    Debido al comportamiento específico de las celdas combinadas, debe tenerse en cuenta cómo se relaciona exactamente con algunas de las otras características de la cuadrícula:

    • Exportación de Excel: las celdas combinadas permanecen combinadas cuando se exportan a Excel.
    • Anclaje de columnas: las celdas permanecen combinadas cuando se fija una columna y se muestran en el área anclada.
    • Fijación de filas: las celdas se fusionan solo dentro de su área contenedora, es decir, las celdas de las filas ancladas se fusionan solo con las celdas de otras filas ancladas, mientras que las celdas de las filas no ancladas se fusionan solo con las celdas de las filas no ancladas.
    • Actualización/Edición: dado que la activación rompe la secuencia de fusión, solo una celda estará en modo de edición.
    • Selección de filas: si las filas seleccionadas intersecan celdas combinadas, todas las celdas combinadas relacionadas deben marcarse como parte de la selección.
    • Navegación/Activación: cuando una celda está activa, todas las celdas combinadas en la misma fila se convierten en celdas individuales, es decir, su secuencia de fusión se rompe. Esto también incluye la activación a través de la navegación con teclado.

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

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.