Angular Virtualização e desempenho do Tree Grid

    Em Ignite UI for Angular, o controle IgxTreeGrid agora utiliza aigxForOf diretiva e virtualiza seu conteúdo tanto vertical quanto horizontalmente.

    Enabling Virtualization

    Ao utilizar aigxForOf diretiva, o IgxTreeGrid agora otimiza a renderização do DOM e o consumo de memória, renderizando apenas o que está atualmente visível na porta de visualização e trocando os dados exibidos enquanto o usuário rola os dados horizontalmente/verticalmente. IgxTreeGrid​width eheight padrões100% que possibilitarão a virtualização caso o conteúdo exibido não caiba no espaço disponível e barras de rolagem sejam necessárias na vertical ou na horizontal. No entanto, também é possível definir explicitamente as Gradewidth de Árvore e/height ou paranull o que significa que a dimensão relacionada será determinada pelo tamanho total dos itens dentro. Nenhuma barra de rolagem será então exibida e todos os itens serão renderizados na respectiva dimensão (colunas sewidth fornull e linhas se for for e linhas seheight fornull for ).

    O tamanho dos blocos de dados é determinado por:

    • A altura da linha para a virtualização vertical (linha). Isso é determinado pelarowHeight opção e é 50(px) por padrão.
    • As larguras individuais das colunas em pixels para a virtualização horizontal (coluna). Elas podem ser determinadas definindo a largura explícita para cada componente da coluna ou definindo a opção da GradecolumnWidth de Á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.