Virtualización y rendimiento Blazor Grid

En Ignite UI for Blazor, el IgbGrid control virtualiza su contenido tanto vertical como horizontalmente.

Blazor Grid Virtualization and Performance Example

Enabling Virtualization

El IgbGrid ahora optimiza la representación DOM y el consumo de memoria al representar solo lo que está actualmente visible en el puerto de visualización e intercambiar los datos mostrados mientras el usuario desplaza los datos horizontal/verticalmente. El IgbGrid 's Width y Height por defecto es 100% lo que permitirá la virtualización si el contenido mostrado no cabe dentro del espacio disponible y se requieren barras de desplazamiento ya sea vertical u horizontalmente.

Sin embargo, también es posible establecer explícitamente el IgbGrid 's Width y/o Height a null lo que significa que la dimensión relacionada estará determinada por el tamaño total de los elementos que contiene. Entonces no se mostrará ninguna barra de desplazamiento y todos los elementos se representarán a lo largo de la dimensión respectiva (columnas si Width es null y filas si Height es null).

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

La altura de la fila para la virtualización vertical (fila). Esto está determinado por la opción RowHeight y es 50 (px) de forma predeterminada.
Los anchos de las columnas individuales en píxeles para la virtualización horizontal (columna). Se pueden determinar estableciendo un ancho explícito para cada componente de columna o configurando la opción ColumnWidth de IgbGrid, que se aplicará a todas las columnas que no tengan un ancho explícito establecido.

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 IgbGrid. 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.

Templating

Cuando se necesita personalizar una de las plantillas existentes en la cuadrícula, Blazor proporciona dos formas posibles de definir una plantilla:

a través de una plantilla del lado del servidor, utilizando la propiedad del componente relacionado (es decir, BodyTemplate propiedad) o declarativamente con el nombre de la plantilla. Por ejemplo:

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

Esto renderizará la plantilla después de solicitarla y resolverla primero desde el servidor.

a través de una plantilla de cliente usando el Script equivalente de la propiedad (es decir BodyTemplateScript) para establecerla en el nombre del controlador de funciones del lado del cliente, por ejemplo:

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

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

Luego, el controlador representa la plantilla iluminada proporcionada directamente en el DOM según sea necesario.

[!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

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 IgbGrid tiene un desbordamiento configurado como oculto. Cambie la opción a "Siempre" y aparecerá la barra de desplazamiento.

FAQ

Why is 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, configurar 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 IgbGrid 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.