Angular Virtualização e desempenho do Tree Grid

    In Ignite UI for Angular, the IgxTreeGrid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally.

    Enabling Virtualization

    By utilizing the igxForOf directive the IgxTreeGrid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. IgxTreeGrid's width and height defaults to 100% which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the Tree Grid's width and/or height to null which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if width is null and rows if height is null).

    O tamanho dos blocos de dados é determinado por:

    • The row height for the vertical (row) virtualization. This is determined by the rowHeight option and is 50(px) by default.
    • The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the Tree Grid's columnWidth option, which will be applied to all columns that don't have explicit width set.

    Na maioria dos casos, permitir que a grade aplique seu comportamento padrão deixando as dimensões não definidas produzirá o layout desejado. Para larguras de coluna, é determinado pela contagem de colunas, as colunas com largura definida e a largura calculada do contêiner da Grade de Árvore. A grade tentará ajustar todas as colunas dentro do espaço disponível, desde que a largura que ela tenta atribuir não seja inferior a 136 (px). Nesses casos, as colunas com largura não atribuída receberão a largura mínima de 136 (px) e uma barra de rolagem horizontal será mostrada. A grade será virtualizada horizontalmente.

    Definir explicitamente as larguras das colunas em porcentagens (%) criará, na maioria dos casos, uma grade que não é virtualizada horizontalmente, pois não terá uma barra de rolagem horizontal.

    Virtualization Limitations

    • No Mac OS, a barra de rolagem horizontal não é visível quando a opção do sistema "Mostrar barras de rolagem somente ao rolar" está definida como true (que é o valor padrão). Isso ocorre porque o contêiner de linha da Grade de Árvore tem um estouro definido como oculto. Altere a opção para "Sempre" e a barra de rolagem aparecerá.

    FAQ

    Why having dimensions in the Tree Grid is necessary for virtualization to work?

    Sem informações sobre os tamanhos do contêiner e dos itens antes de renderizá-los, definir a largura ou a altura de uma barra de rolagem ou determinar qual dos itens deve estar na exibição quando você rola para um local aleatório na Grade de Árvore está errado. Quaisquer suposições sobre quais podem ser as dimensões reais podem levar a um comportamento não natural da barra de rolagem e, em última análise, a uma experiência abaixo do ideal para o usuário final. É por isso que a configuração das dimensões relacionadas é imposta para que a virtualização entre em vigor.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.