Virtualización y rendimiento Angular Grid

    En Ignite UI for Angular, el control IgxGrid ahora utiliza laigxForOf directiva y virtualiza su contenido tanto vertical como horizontalmente.

    Angular Grid Virtualization and Performance Example

    Enabling Virtualization

    Al utilizar laigxForOf directiva, IgxGrid ahora optimiza el renderizado DOM y el consumo de memoria al renderizar solo lo que es visible en el viewport y intercambiar los datos mostrados mientras el usuario desplaza los datos horizontal o verticalmente. IgxGrid​width yheight valores predeterminados100% que permiten la virtualización si el contenido mostrado no cabe en el espacio disponible y las barras de desplazamiento deben ser verticales u horizontales. Sin embargo, también es posible establecer explícitamente los ywidth /o de laheight Cuadrícula anull, lo que significa que la dimensión relacionada estará determinada por el tamaño total de los elementos en su interior. No se mostrará ninguna barra de desplazamiento y todos los elementos se renderizarán a lo largo de la dimensión correspondiente (columnas siwidth esnull y filas siheight estánull).

    El tamaño de los fragmentos de datos está determinado por:

    • La altura de la fila para la virtualización vertical (fila). Esto se determina por larowHeight opción y es 50(px) por defecto.
    • Los anchos individuales de columna en píxeles para la virtualización horizontal (columna). Se pueden determinar estableciendo un ancho explícito para cada componente de columna o estableciendo la opción de lacolumnWidth Cuadrícula, que se aplicará a todas las columnas que no tengan el ancho explícitamente definido.

    En la mayoría de los casos, dejar que la cuadrícula aplique su comportamiento predeterminado dejando las dimensiones sin establecer producirá el diseño deseado. Para el ancho de las columnas, está determinado por el recuento de columnas, las columnas con el ancho establecido y el ancho calculado del contenedor de la cuadrícula. La cuadrícula intentará ajustar todas las columnas dentro del espacio disponible siempre que el ancho que intenta asignar no sea inferior a 136 (px). En tales casos, las columnas con ancho no asignado recibirán el ancho mínimo de 136 (px) y se mostrará una barra de desplazamiento horizontal. La grilla se virtualizará horizontalmente.

    Establecer explícitamente los anchos de las columnas en porcentajes (%) creará, en la mayoría de los casos, una cuadrícula que no está virtualizada horizontalmente ya que no tendrá una barra de desplazamiento horizontal.

    Remote Virtualization

    La Grid soporta virtualización remota, como se demuestra en elGrid Remote Data Operations tema.

    Virtualization Limitations

    • En Mac OS, la barra de desplazamiento horizontal no es visible cuando la opción del sistema "Mostrar barras de desplazamiento solo al desplazarse" está configurada en verdadero (que es el valor predeterminado). Esto se debe a que el contenedor de filas de Grid tiene un desbordamiento configurado como oculto. Cambie la opción a "Siempre" y aparecerá la barra de desplazamiento.

    FAQ

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

    Sin información sobre los tamaños del contenedor y los elementos antes de renderizarlos, establecer el ancho o alto de una barra de desplazamiento o determinar cuál de los elementos debe estar en la vista cuando se desplaza a una ubicación aleatoria en la cuadrícula es erróneo. Cualquier suposición sobre cuáles podrían ser las dimensiones reales podría dar lugar a un comportamiento antinatural de la barra de desplazamiento y, en última instancia, a una experiencia subóptima para el usuario final. Esta es la razón por la que se impone la configuración de las dimensiones relacionadas para que la virtualización surta efecto.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.