Virtualización y rendimiento Blazor Tree Grid

    In Ignite UI for Blazor, the IgbTreeGrid control virtualizes its content both vertically and horizontally.

    Enabling Virtualization

    The IgbTreeGrid 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. The IgbTreeGrid'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 IgbTreeGrid'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:

    • 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 theIgbTreeGrid '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 delIgbTreeGrid 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:

    • via a server-side template, using the related component property (i.e. BodyTemplate property) or declaratively with the template name. For example:
    <IgbColumn>
    <BodyTemplate>
        Template content here
    </BodyTemplate>
</IgbColumn>

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

    • via a client-template using the Script equivalent of the property (i.e. BodyTemplateScript) to set it to the name of the client-side function handler, for example:
    <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'sIgbTreeGrid 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 Tree 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 elIgbTreeGrid 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.