Angular Tree Grid 가상화 및 성능

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

    Enabling Virtualization

    By utilizing the igxForOf directive the IgxTreeGrid 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. IgxTreeGrid'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 Tree 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).

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

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

    대부분의 경우 치수를 설정하지 않은 채로 그리드에 기본 동작을 적용하면 원하는 레이아웃이 생성됩니다. 열 너비의 경우 열 개수, 너비가 설정된 열, 트리 그리드 컨테이너의 계산된 너비에 따라 결정됩니다. 그리드는 할당하려는 너비가 136(px) 미만이 아닌 한 사용 가능한 공간 내에 모든 열을 맞추려고 시도합니다. 이 경우 너비가 지정되지 않은 열에는 최소 너비인 136(px)이 적용되고 가로 스크롤 막대가 표시됩니다. 그리드는 수평으로 가상화됩니다.

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

    Virtualization Limitations

    • Mac OS에서는 "스크롤할 때만 스크롤 막대 표시" 시스템 옵션이 true(기본값)로 설정된 경우 가로 스크롤 막대가 표시되지 않습니다. 이는 트리 그리드의 행 컨테이너에 숨김으로 설정된 오버플로가 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 나타납니다.

    FAQ

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

    렌더링하기 전에 컨테이너와 항목의 크기에 대한 정보가 없으면 스크롤 막대의 너비나 높이를 설정하거나 트리 그리드의 임의 위치로 스크롤할 때 뷰에 표시되어야 하는 항목을 결정하는 것은 잘못된 것입니다. 실제 크기에 대한 가정은 스크롤 막대의 부자연스러운 동작으로 이어질 수 있으며 궁극적으로 최종 사용자에게 최적이 아닌 경험을 제공할 수 있습니다. 이것이 가상화를 적용하기 위해 관련 차원 설정이 강제되는 이유입니다.

    API References

    Additional Resources

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