Blazor Grid 가상화 및 성능

Ignite UI for Blazor에서 IgbGrid 컨트롤은 콘텐츠를 수직 및 수평으로 가상화합니다.

Blazor Grid Virtualization and Performance Example

Enabling Virtualization

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

그러나 IgbGrid의 Width 및/또는 Height null로 명시적으로 설정할 수도 있습니다. 즉, 관련 치수가 내부 항목의 전체 크기에 따라 결정됩니다. 그러면 스크롤 막대가 표시되지 않고 모든 항목이 해당 차원(Width가 null 인 경우 열, Height가 null 인 경우 행)을 따라 렌더링됩니다.

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

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

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

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

Templating

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

서버 측 템플릿을 통해 관련 구성 요소 속성(즉, BodyTemplate 속성)을 사용하거나 템플릿 이름과 함께 선언적으로 사용합니다. 예를 들어:

<IgbColumn>
    <BodyTemplate>
        Template content here
    </BodyTemplate>
</IgbColumn>

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

속성과 동등한 것을 사용하여 Script 클라이언트 템플릿을 통해 (즉 BodyTemplateScript) 클라이언트 측 함수 핸들러의 이름으로 설정합니다.

<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

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

FAQ

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

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

API References

Additional Resources

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