Blazor Virtualização e desempenho da grade

    No Ignite UI for Blazor, o IgbGrid controle virtualiza seu conteúdo vertical e horizontalmente.

    Blazor Grid Virtualization and Performance Example

    Enabling Virtualization

    O IgbGrid 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. Os IgbGrid padrões Width e Height padrões para os 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 IgbGrid '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 É null e linhas se Height É 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 da coluna ou definindo a IgbGrid opção the ColumnWidth, 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 IgbGrid contêiner. 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 IgbGrid contêiner de linha do tem um estouro definido como oculto. Altere a opção para "Sempre" e a barra de rolagem aparecerá.

    FAQ

    Why is 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 no IgbGrid é 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.