Angular Cell Merging

    A grade Ignite UI for Angular fornece um recurso de mesclagem de células que combina duas ou mais células adjacentes com o mesmo valor em uma única célula maior. A mesclagem é aplicada verticalmente em uma coluna e ajuda a melhorar a legibilidade, reduzindo valores duplicados. O recurso pode ser configurado para mesclar células por valores de dados correspondentes padrão ou aplicando uma condição personalizada.

    Angular Cell Merging Example

    Enabling and Using Cell Merging

    A fusão de células na grade é controlada em dois níveis:

    • Modo de mesclagem no nível da grade – determina quando a mesclagem é aplicada.
    • Alternância de mesclagem no nível da coluna – determina quais colunas podem mesclar células.

    Grid Merge Mode

    A grade expõe umacellMergeMode propriedade que aceita valores doGridCellMergeMode enum:

    • always- Muma quaisquer células adjacentes que atendam à condição de fusão, independentemente do estado de ordenação.
    • onSort- Mesla células adjacentes apenas quando a coluna está ordenada (valor padrão).​
    <igx-grid [data]="data" [cellMergeMode]="cellMergeMode">
    ...
</igx-grid>

    protected cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

    No nível da coluna, a fusão pode ser habilitada ou desativada com amerge propriedade.

    <igx-column field="OrderID" [merge]="true"></igx-column>
<igx-column field="ShipperName" [merge]="false"></igx-column>

    No exemplo acima:

    • The OrderID column will merge adjacent duplicate values.
    • A coluna ShipperName será renderizada normalmente sem mesclagem.

    Combined Example

    <igx-grid [data]="data" [cellMergeMode]="cellMergeMode" [autoGenerate]="false">
    <igx-column field="OrderID" header="Order ID" [merge]="true"></igx-column>
    <igx-column field="ShipperName" header="Shipper Name" [merge]="true"></igx-column>
    <igx-column field="Salesperson" header="Salesperson"></igx-column>
</igx-grid>

    protected cellMergeMode: GridCellMergeMode = 'onSort';

    Aqui, a grade é definida para mesclar somente quando as colunas são classificadas e as colunas Categoria e Produto são configuradas para mesclagem.

    Custom Merge Conditions

    Além dos modos ealways de integraçãoonSort integrados, a grade permite definir uma condição personalizada para mesclar células através damergeStrategy propriedade. Essa estratégia controla tanto como as células são comparadas quanto como os intervalos fundidos são calculados.

    Merge Strategy Interface

    Uma estratégia de merge personalizada deve implementar aIGridMergeStrategy interface:

    export interface IGridMergeStrategy {
    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- define como as células mesclaras são produzidas.
    • comparer- define a condição para decidir se dois registros adjacentes devem ser fundidos.

    Extending the Default Strategy

    Se você quiser personalizar apenas parte do comportamento (por exemplo, a lógica do comparador), pode estender o conteúdo embutidoDefaultMergeStrategy e sobrescrever os métodos relevantes.

    export class MyCustomStrategy extends DefaultMergeStrategy {
    /* 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

    Uma vez definida, atribua a estratégia à grade através damergeStrategy propriedade:

    <igx-grid [data]="data" [mergeStrategy]="customStrategy">
  <igx-column field="ActionID" [merge]="true"></igx-column>
  <igx-column field="ProjectName" [merge]="true"></igx-column>
</igx-grid>

    protected customStrategy = new MyCustomStrategy();

    Demo

    Feature Integration

    Devido ao comportamento específico das células mescladas, deve-se notar como exatamente elas se unem a alguns dos outros recursos da grade:

    • Expandir/Recolher: se um recurso (como mestre-detalhe, agrupamento, etc.) gerar uma linha que não seja de dados, a mesclagem da célula será interrompida e o grupo será dividido.

    • Exportação do Excel: as células mescladas permanecem mescladas quando exportadas para o Excel.

    • Fixação de coluna: as células permanecem mescladas quando uma coluna é fixada e são exibidas na área fixada.

    • Fixação de linha: as células se fundem apenas dentro de sua área de contenção, ou seja, as células de linhas fixadas se fundem apenas com células de outras linhas fixadas, enquanto as células de linhas não fixadas se fundem apenas com células de linhas não fixadas.

    • Navegação/Ativação: quando uma célula está ativa, todas as células mescladas na mesma linha tornam-se células únicas, ou seja, sua sequência de mesclagem é quebrada. Isso também inclui a ativação por meio da navegação pelo teclado.

    Note

    Se uma célula mesclada for clicada, a célula mais próxima da sequência de mesclagem ficará ativa.

    • Atualização/Edição: como a ativação interrompe a sequência de mesclagem, apenas uma única célula estará no modo de edição.
    • Seleção de linha: se as linhas selecionadas cruzarem células mescladas, todas as células mescladas relacionadas devem ser marcadas como parte da seleção.

    Limitations

    Limitações conhecidas Descrição
    A mesclagem de células não é suportada em combinação com o Layout de várias linhas. Ambos abrangem layouts complexos que não fazem sentido quando combinados. Um aviso será lançado se essa configuração inválida for detectada.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.