Web Components 트리 그리드 가상화 및 성능

Ignite UI for Web Components에서 IgcTreeGridComponent Control은 콘텐츠를 수직 및 수평으로 가상화합니다.

가상화 활성화

IgcTreeGridComponent 이제 현재 뷰 포트에 표시되는 것만 렌더링하고 사용자가 데이터를 가로/세로로 스크롤하는 동안 표시된 데이터를 교환하여 DOM 렌더링 및 메모리 소비를 최적화합니다. IgcTreeGridComponent width 및 height 기본값은 100% 표시된 콘텐츠가 사용 가능한 공간에 맞지 않고 스크롤 막대가 세로 또는 가로로 필요한 경우 가상화를 사용하도록 설정합니다.

그러나 명시적으로 설정할 수도 있습니다. IgcTreeGridComponent의 width 및/또는 height 받는 사람 null 즉, 관련 치수는 내부 항목의 총 크기에 따라 결정됩니다. 그러면 스크롤바가 표시되지 않고 모든 항목이 해당 차원을 따라 렌더링됩니다(width 다음과 같음 null 및 행 height 다음과 같음 null).

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

수직(행) 가상화의 행 높이입니다. rowHeight 옵션에 의해 결정되며 기본적으로 50(px)입니다.
수평(열) 가상화에 대한 개별 열 너비(픽셀)입니다. 각 열 구성 요소에 대해 명시적 너비를 설정하거나 명시적 너비가 설정되지 않은 모든 열에 적용되는 옵션을 설정하여 IgcTreeGridComponent columnWidth 결정할 수 있습니다.

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

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

가상화 제한

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

자주하는 질문

가상화가 작동하기 위해 트리 그리드에 차원이 있어야 하는 이유는 무엇입니까?

컨테이너와 항목을 렌더링하기 전에 컨테이너 및 항목의 크기에 대한 정보가 없으면 스크롤 막대의 너비 또는 높이를 설정하거나 에서 임의의 위치로 IgcTreeGridComponent 스크롤할 때 뷰에 있어야 하는 항목을 결정하는 것이 잘못되었습니다. 실제 크기가 무엇인지에 대한 가정은 스크롤 막대의 부자연스러운 동작으로 이어질 수 있으며 궁극적으로 최종 사용자에게 최적이 아닌 경험을 제공할 수 있습니다. 따라서 가상화를 적용하기 위해 관련 차원을 설정해야 합니다.

API 참조

추가 리소스

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