Virtualización y rendimiento de la red jerárquica Blazor

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

    Blazor Hierarchical Grid Virtualization and Performance Example

    Enabling Virtualization

    AhoraIgbHierarchicalGrid optimiza el renderizado DOM y el consumo de memoria renderizando solo lo que es visible en el viewport y cambiando los datos mostrados mientras el usuario desplaza los datos horizontal o verticalmente. LosIgbHierarchicalGrid​Width 's yHeight los100% valores predeterminados que permiten la virtualización si el contenido mostrado no cabe en el espacio disponible y las barras de desplazamiento son necesarias tanto verticales como horizontales.

    Sin embargo, también es posible establecer explícitamente losIgbHierarchicalGrid​Width y/oHeight 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 el ancho explícito para cada componente de columna o la opción theIgbHierarchicalGrid 'sColumnWidth, que se aplicará a todas las columnas que no tengan el ancho explícito establecido.

    En la mayoría de los casos, dejar que la cuadrícula aplique su comportamiento por defecto dejando las dimensiones sin definir producirá la disposición deseada. Para anchos de columna, se determina por el recuento de columnas, las columnas con ancho conjunto y el ancho calculado delIgbHierarchicalGrid contenedor. La cuadrícula intentará encajar todas las columnas dentro del espacio disponible siempre que el ancho que intente 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 cuadrícula 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:

    • mediante una plantilla del lado del servidor, usando la propiedad de componente relacionada (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.

    • mediante una plantilla cliente usando elScript equivalente de la propiedad (es decirBodyTemplateScript, para asignarla al nombre del gestor de función del lado 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 desplazar" está configurada en true (que es el valor predeterminado). Esto se debe a que el contenedor de fila de the'sIgbHierarchicalGrid tiene un overflow configurado como oculto. Cambia la opción a "Siempre" y aparecerá la barra de desplazamiento.

    FAQ

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

    Sin información sobre el tamaño del contenedor y de los objetos antes de renderizarlos, establecer el ancho o la altura de una barra de desplazamiento o determinar cuáles de los objetos deben estar en la vista cuando desplazas a una ubicación aleatoria en elIgbHierarchicalGrid error es erróneo. Cualquier suposición sobre cuáles podrían ser las dimensiones reales podría llevar a un comportamiento antinatural de la barra de desplazamiento y, en última instancia, a una experiencia subóptima para el usuario final. Por eso se impone establecer las dimensiones relacionadas para que la virtualización tenga efecto.

    API References

    Additional Resources

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