Blazor Grid 가상화 및 성능

Ignite UI for Blazor 에서는 컨트롤이IgbGrid 콘텐츠를 수직과 수평으로 모두 가상화합니다.

Blazor Grid Virtualization and Performance Example

Enabling Virtualization

그IgbGrid 이제 뷰포트에 현재 보이는 것만 렌더링하고, 사용자가 데이터를 수평/수직으로 스크롤할 때 표시 데이터를 교체하여 DOM 렌더링과 메모리 소비를 최적화합니다. 그IgbGrid 'sWidth 그리고Height 기본값은100%이 기능은 표시되는 콘텐츠가 사용 가능한 공간 내에 들어가지 않고 스크롤바가 수직 또는 가로로 필요할 때 가상화를 가능하게 합니다.

하지만 명시적으로 다음IgbGrid 'sWidth 그리고/또는Height 받는 사람null 즉, 관련 차원은 내부 물건들의 총 크기에 의해 결정됩니다. 이후에는 스크롤바가 표시되지 않고, 모든 항목은 해당 차원(열, 만약Width 이야.null 그리고 행은 다음과 같다.Height 이야.null).

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

수직(행) 가상화의 행 높이. 이 금액은 옵션에 의해RowHeight 결정되며 기본값은 50(px)입니다.
가상화를 위한 개별 열 너비는 픽셀 단위로 표시됩니다. 각 열의 구성 요소에 대해 명시적 너비를 설정하거나, 명시적 너비가 설정되지 않은 모든 열에 적용되는 theIgbGrid 'sColumnWidth 옵션을 설정함으로써 결정할 수 있습니다.

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

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

Templating

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

서버 측 템플릿을 통해 관련 컴포넌트 속성(즉BodyTemplate, Property)을 사용하거나 템플릿 이름을 선언적으로 사용할 수 있습니다. 예를 들어:

<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에서는 "스크롤 바 표시(show show when rolling when when scrolling on ocolding)" 시스템 옵션이 true로 설정되어 있을 때(기본 값) 수평 스크롤바가 보이지 않습니다. 이는 row 컨테이너가 overflow를 숨겨둔 상태이기 때문입니다IgbGrid. "항상"으로 바꾸면 스크롤바가 나타납니다.

FAQ

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

컨테이너의 크기와 아이템을 렌더링하기 전에 정보를 갖지 못하고, 스크롤바의 너비나 높이를 설정하거나, 무작위 위치IgbGrid로 스크롤할 때 어떤 아이템이 뷰에 들어야 하는지 결정하는 것은 잘못된 것입니다. 실제 치수에 대한 가정은 스크롤바의 부자연스러운 동작을 초래하고 궁극적으로 최종 사용자에게 최적이 아닌 경험을 초래할 수 있습니다. 이 때문에 가상화가 효과를 발휘하기 위해 관련 차원 설정이 강제됩니다.

API References

Additional Resources

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