React Mesclagem de células de grade de árvore

    A Grade de Árvore Ignite UI for React 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.

    React Tree Grid 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).​
    <IgrTreeGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrTreeGrid>

    const cellMergeMode: GridCellMergeMode = 'always';

    Column Merge Toggle

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

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

    No exemplo acima:

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

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

    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 Class

    Uma estratégia de fusão personalizada deve implementar aIgrGridMergeStrategy classe:

    • merge- define como as células mesclaras são produzidas.
    • comparer- define a condição para decidir se dois registros adjacentes devem ser fundidos.

    EleIgrTreeGrid fornece duas estratégias integradas que implementam aIGridMergeStrategy interface:IgrDefaultTreeGridMergeStrategy eIgrByLevelTreeGridMergeStrategy.IgrDefaultTreeGridMergeStrategy funde todas as células com o mesmo valor, independentemente do seu nível hierárquico. Em contraste,IgrByLevelTreeGridMergeStrategy só funde células se tiverem o mesmo valor e estiverem localizadas no mesmo nível, tornando o nível uma condição necessária para a fusão.

    Extending the Default Strategy

    Se você quiser personalizar apenas parte do comportamento (por exemplo, a lógica do comparador), pode estender uma das estratégias embutidas, qualquerIgrDefaultTreeGridMergeStrategy uma ouIgrByLevelTreeGridMergeStrategy outra, e sobrescrever os métodos relevantes.

    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

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

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

    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:

    • 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.
    • 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.
    • 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] If a merged cell is clicked, the closest cell from the merge sequence will become active.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.