title: Angular Grid Virtualization and Performance - Ignite UI for Angular _description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free! _keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular _canonicalLink: grid/virtualization

    Angular Virtualização e desempenho de grade hierárquica

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

    Demo

    Enabling Virtualization

    Ao utilizar aigxForOf diretiva, o IgxHierarchicalGrid agora otimiza a renderização DOM e o consumo de memória, renderizando apenas o que está atualmente visível na viewport e trocando os dados exibidos enquanto o usuário rola os dados horizontalmente/verticalmente. IgxHierarchicalGrid​width eheight padrões100% que permitem virtualização caso o conteúdo exibido não cabe no espaço disponível e barras de rolagem sejam exigidas tanto na vertical quanto na horizontal. No entanto, também é possível definir explicitamente as Gradewidth Hierárquicas e/ouheight 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 largura explícita para cada componente da coluna ou definindo a opção da GradecolumnWidth Hierárquica, que será aplicada a todas as colunas que não possuem 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 Hierárquica. 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 Hierárquica tem um estouro definido como oculto. Altere a opção para "Sempre" e a barra de rolagem aparecerá.

    FAQ

    Why having dimensions in the Hierarchical 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 quais dos itens devem estar no modo de exibição quando você rola para um local aleatório na Grade Hierárquica é errôneo. 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.