Blazor Virtualização e desempenho do Tree Grid

Em Ignite UI for Blazor, oIgbTreeGrid controle virtualiza seu conteúdo tanto vertical quanto horizontalmente.

Enabling Virtualization

Agora,IgbTreeGrid o computador otimiza a renderização do DOM e o consumo de memória ao renderizar apenas o que está atualmente visível na viewport e trocar os dados exibidos enquanto o usuário rola os dados horizontalmente/verticalmente. OsIgbTreeGridWidth padrõesHeight100% e padrões que permitirã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 theIgbTreeGrid 'sWidth 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). Eles podem ser determinados definindo largura explícita para cada componente da coluna ou definindo a opção theIgbTreeGrid 'sColumnWidth, que será aplicada a todas as colunas que não possuem largura explícita definida.

Na maioria dos casos, deixar a grade aplicar seu comportamento padrão deixando as dimensões sem definir produzirá o layout desejado. Para larguras de coluna, isso é determinado pela contagem de colunas, pelas colunas com largura de conjunto e pela largura calculada doIgbTreeGrid contêiner. A grade tentará encaixar todas as colunas dentro do espaço disponível, desde que a largura que tenta atribuir não seja inferior a 136(px). Nesses casos, 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

Ao precisar personalizar um dos modelos existentes na grade, Blazor fornece duas maneiras possíveis de definir um modelo:

via um template do lado do servidor, usando a propriedade de componente relacionada (ou seja,BodyTemplate propriedade) ou declarativamente com o nome do template. Por exemplo:

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

Isso renderizará o modelo após solicitá-lo e resolvê-lo primeiro no servidor.

via um modelo de cliente usando oScript equivalente da propriedade (ou sejaBodyTemplateScript) para defini-la como o nome do manipulador de função do lado do cliente, por exemplo:

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

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

Em seguida, o manipulador renderiza o modelo iluminado fornecido diretamente no DOM, conforme necessário.

[!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 horizontal de rolagem não é visível quando a opção do sistema "Mostrar barras de rolagem apenas ao rolar" está configurada como true (que é o valor padrão). Isso ocorre porque oIgbTreeGrid contêiner da linha do the's tem um overflow configurado para oculto. Mude a opção para "Sempre" e a barra de rolagem vai aparecer.

FAQ

Why is having dimensions in the Tree Grid is necessary for virtualization to work?

Sem informações sobre o tamanho do contêiner e dos itens antes de renderizá-los, definir a largura ou altura de uma barra de rolagem ou determinar quais itens devem estar na visualização ao rolar para um local aleatório no éIgbTreeGrid erroneo. Qualquer suposição sobre quais são as dimensões reais pode levar a um comportamento não natural da barra de rolagem e, em última análise, a uma experiência subótima para o usuário final. Por isso, a definição das dimensões relacionadas é imposta para que a virtualização tenha efeito.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.