Angular Virtualização e desempenho do Tree Grid

    No Ignite UI for Angular, o controle IgxTreeGrid agora utiliza a igxForOf diretiva e virtualiza seu conteúdo vertical e horizontalmente.

    Enabling Virtualization

    Ao utilizar a igxForOf diretiva, o IgxTreeGrid agora otimiza a renderização do DOM e o consumo de memória, renderizando apenas o que está visível no momento na porta de exibição e trocando os dados exibidos enquanto o usuário rola os dados horizontalmente/verticalmente. IgxTreeGrid 's width e height os padrões para que habilitarão a virtualização se o conteúdo exibido não couber dentro do espaço disponível e as barras de 100% rolagem forem necessárias vertical ou horizontalmente. No entanto, também é possível definir explicitamente o Tree Grid's width e/ou height para null o que significa que a dimensão relacionada será determinada pelo tamanho total dos itens dentro. Nenhuma barra de rolagem será mostrada e todos os itens serão renderizados ao longo da respectiva dimensão (colunas se width for null e linhas se height for null).

    O tamanho dos blocos de dados é determinado por:

    • A altura da linha para a virtualização vertical (linha). Isso é determinado pela rowHeight opção e é 50 (px) por padrão.
    • As larguras de coluna individuais em pixels para a virtualização horizontal (coluna). Eles podem ser determinados definindo a largura explícita para cada componente de coluna ou definindo a opção da Grade de columnWidth Árvore, que será aplicada a todas as colunas que não têm largura explícita definida.

    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.