Virtualización y rendimiento Angular Grid

    In Ignite UI for Angular, the IgxGrid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally.

    Angular Grid Virtualization and Performance Example

    Enabling Virtualization

    By utilizing the igxForOf directive the IgxGrid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. IgxGrid's width and height defaults to 100% which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the Grid's width and/or height to null which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if width is null and rows if height is null).

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

    • The row height for the vertical (row) virtualization. This is determined by the rowHeight option and is 50(px) by default.
    • The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the Grid's columnWidth option, which will be applied to all columns that don't have explicit width set.

    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

    The Grid supports remote virtualization, which is demonstrated in the Grid Remote Data Operations topic.

    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.