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

    데이터 청크의 크기는 다음에 의해 결정됩니다.

    • 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 IgbTreeGrid's ColumnWidth option, which will be applied to all columns that don't have explicit width set.

    In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the IgbTreeGrid's container. The grid will try to fit all columns inside the available space as long as the width it attempts to assign is not under 136(px). In such cases, columns with unassigned width will receive the minimum width of 136(px) and a horizontal scrollbar will be shown. The grid will be horizontally virtualized.

    열 너비를 백분율(%)로 명시적으로 설정하면 대부분의 경우 수평 스크롤 막대가 없기 때문에 수평으로 가상화되지 않는 그리드가 생성됩니다.

    Templating

    그리드의 기존 템플릿 중 하나를 사용자 정의해야 하는 경우 Blazor 템플릿을 정의하는 두 가지 가능한 방법을 제공합니다.

    • 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>

    이렇게 하면 서버에서 템플릿을 처음 요청하고 해결한 후 템플릿이 렌더링됩니다.

    • 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);

    그런 다음 핸들러는 필요에 따라 제공된 lit 템플릿을 DOM에서 직접 렌더링합니다.

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

    On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the IgbTreeGrid’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear.

    FAQ

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

    Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the IgbTreeGrid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take effect.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.