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.

Templating

When needing to customize one of the existing templates in the grid, Blazor provides two possible ways to define a template:

via a server-side template, using the related component property (i.e. BodyTemplate property) or declaratively with the template name. For example:

<IgbColumn>
    <BodyTemplate>
        Template content here
    </BodyTemplate>
</IgbColumn>

This will render the template after first requesting and resolving it from the server.

via a client-template using the Script equivalent of the property (i.e. BodyTemplateScript) to set it to the name of the client-side function handler, for example:

<IgbColumn BodyTemplateScript="CellTemplate">
</IgbColumn>

igRegisterScript("CellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`Template content here`;
}, false);

The handler then renders the provided lit template directly in the DOM as needed.

[!Note] While both approaches are valid, the server-side templates do require a round-trip request to the server to retrieve and resolve the custom template before rendering it on the client. As such the client-template approach is more optimized and recommended, especially in scenarios with many templates that need frequent updates as there may be a noticeable delay between the related user-interaction and the template updates.

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.