React Virtualização e desempenho do Tree Grid

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

    Enabling Virtualization

    Agora,IgrTreeGrid 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. OsIgrTreeGrid​width padrõesheight​100% 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 theIgrTreeGrid '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 theIgrTreeGrid '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 doIgrTreeGrid 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.

    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 oIgrTreeGrid 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 éIgrTreeGrid 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.