Angular Virtualização e desempenho da grade

    Além Ignite UI for Angular, o controle IgxGrid agora utiliza a igxForOf diretiva e virtualiza seu conteúdo vertical e horizontalmente.

    Angular Grid Virtualization and Performance Example

    Enabling Virtualization

    Ao utilizar a diretiva, o IgxGrid agora otimiza a igxForOf 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. IgxGrid 's width e height padrões para quais 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 e/ou height do Grid, width o null que significa que a dimensão relacionada será determinada pelo tamanho total dos itens internos. 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 columnWidth coluna ou definindo a opção Grid, 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. 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.

    Remote Virtualization

    O Grid oferece suporte à virtualização remota, o que é demonstrado no Grid Remote Data Operations tópico.

    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 do Grid tem um estouro definido como oculto. Altere a opção para "Sempre" e a barra de rolagem aparecerá.

    FAQ

    Why having dimensions in the 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 é 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.