![Blazor WASM Virtualization](image/blogs/blazor/wasm/blazor-wasm-virtualization.png)
Blazor WASM Virtualization
Blazor
27 Articles
In this article, let's learn about Virtualization
and how to use Virtualize
component to load huge data in Blazor WASM application.
Note: If you have not done so already, I recommend you read the article on Blazor WASM App Settings.
Table of Contents
- Why Virtualization?
- When Virtualization?
- Without Virtualization
- With Virtualization
- Virtualize Component
- Item provider delegate
- Placeholder
- Item Size
- Overscan count
- Statechanges
- Summary
Why Virtualization?
Loading a large dataset or displaying data
in a grid is a more common way to list data in many applications.
Virtualization
is a technique for limiting UI rendering to just the parts that are currently visible in UI.
This will improve the rendering performance and gives better user experience. For example, virtualization is helpful when the app must render a long list
of items and only a subset of items is required to be visible at any given time.
When Virtualization?
Use the Virtualize
component when:
- Rendering a set of data
items in a loop
. For example, loading Recommended Content in I ❤️ .NET - Most of the
items aren't visible due to scrolling
. - The rendered
items are the same size
.
When the user scrolls to a certain point in the Virtualize
component's list of items, the component
calculates the visible items to show. Unseen items aren't rendered.
Without Virtualization
Without virtualization, a typical list data might use a C# foreach
loop to render each item in a list.
In the following example:
tableOfContents.Contents
is a collection of contents.- The
VirtualizationContent
displays details about each content. -
The
@key directive attribute
preserves the relationship of eachVirtualizationContent
component to its rendered content by the content's ContentId.
Code Sample - Without Virtualization
Demo - Without Virtualization Demo
To demonstrate how list renders without virtualization, let's create a list of contents using foreach
loop.
![Configuring Authentication in Functional testing in ASP.NET WEB API](image/blogs/webapi/configuring-authentication-in-functional-testing-in-asp-net-webapi.webp)
Configuring Authentication in Functional testing in ASP.NET WEB API
Abdul Rahman
![Using WireMock.NET in Functional testing in ASP.NET WEB API](image/blogs/webapi/using-wiremock-net-in-functional-testing-in-asp-net-webapi.webp)
Using WireMock.NET in Functional testing in ASP.NET WEB API
Abdul Rahman
![Using Docker Test Containers in Functional Testing in ASP.NET WEB API](image/blogs/webapi/using-docker-test-containers-in-functional-testing-in-asp-net-webapi.webp)
Using Docker Test Containers in Functional Testing in ASP.NET WEB API
Abdul Rahman
![Faking Dependencies in Functional testing in ASP.NET WEB API](image/blogs/webapi/faking-dependencies-in-functional-testing-in-asp-net-webapi.webp)
Faking Dependencies in Functional testing in ASP.NET WEB API
Abdul Rahman
![Functional testing your ASP.NET WEB API](image/blogs/webapi/functional-testing-your-asp-net-webapi.webp)
Functional testing your ASP.NET WEB API
Abdul Rahman
![OWASP - Secure your dotnet app by scanning for vulnerable nuget dependencies in CI pipelines](image/blogs/owasp/owasp-secure-your-dotnet-app-by-scanning-for-vulnerable-nuget-dependency-in-ci-pipelines.webp)
OWASP - Secure your dotnet app by scanning for vulnerable nuget dependencies in CI pipelines
Abdul Rahman
![Design and Deployment and Scaling Consideration in SignalR](image/blogs/signalr/design-and-deployment-and-scaling-in-signalr.webp)
Design and Deployment and Scaling Consideration in SignalR
Abdul Rahman
![Streaming and Authentication and Authorization in SignalR](image/blogs/signalr/streaming-and-authentication-and-authorization-in-signalr.webp)
Streaming and Authentication and Authorization in SignalR
Abdul Rahman
![Exception Handling and Logging in SignalR](image/blogs/signalr/exception-handling-and-logging-in-signalr.webp)
Exception Handling and Logging in SignalR
Abdul Rahman
![Message Pack Hub Protocol and Keep Alive in SignalR](image/blogs/signalr/message-pack-hub-protocol-and-keep-alive-in-signalr.webp)
Message Pack Hub Protocol and Keep Alive in SignalR
Abdul Rahman
![Send Notifications to Groups and Connection Id in SignalR](image/blogs/signalr/send-notifications-to-groups-and-connectionid-in-signalr.webp)
Send Notifications to Groups and Connection Id in SignalR
Abdul Rahman
![Send Notifications using IHubContext and Caller in SignalR](image/blogs/signalr/send-notifications-using-ihubcontext-and-caller-in-signalr.webp)
Send Notifications using IHubContext and Caller in SignalR
Abdul Rahman
![Profiling Web API with Mini Profiler](image/blogs/webapi/profiling-webapi-with-mini-profiler.webp)
Profiling Web API with Mini Profiler
Abdul Rahman
![Types of Clients in SignalR](image/blogs/signalr/types-of-clients-in-signalr.webp)
Types of Clients in SignalR
Abdul Rahman
![Improving performance and memory use while accessing APIs using HTTPClient in dotnet](image/blogs/http-client/improving-performance-and-memory-use-while-accessing-apis-using-http-client-in-dotnet.webp)
Improving performance and memory use while accessing APIs using HTTPClient in dotnet
Abdul Rahman
![Fundamentals of SignalR in .Net](image/blogs/signalr/fundamentals-of-signalr-in-dotnet.webp)
Fundamentals of SignalR in .Net
Abdul Rahman
![Blazor WASM Publishing to GitHub Pages](image/blogs/blazor/wasm/blazor-wasm-publishing-to-github-pages.webp)
Blazor WASM Publishing to GitHub Pages
Abdul Rahman
![Blazor WASM Publishing to IIS](image/blogs/blazor/wasm/blazor-wasm-publishing-to-iis.webp)
Blazor WASM Publishing to IIS
Abdul Rahman
![Blazor WASM Event Handling And Event Arguments](image/blogs/blazor/wasm/blazor-wasm-event-handling-and-event-arguments.webp)
Blazor WASM Event Handling And Event Arguments
Abdul Rahman
![Blazor WASM Pre Rendering](image/blogs/blazor/wasm/blazor-wasm-pre-rendering.webp)
Blazor WASM Pre Rendering
Abdul Rahman
![Generate PDF Report using Quest PDF in .NET](image/blogs/report/generate-pdf-report-using-quest-pdf-in-dotnet.webp)
Generate PDF Report using Quest PDF in .NET
Abdul Rahman
![Blazor WASM Dynamic Component](image/blogs/blazor/wasm/blazor-wasm-dynamic-component.webp)
Blazor WASM Dynamic Component
Abdul Rahman
![Generate Excel Report using Closed XML in .NET](image/blogs/report/generate-excel-report-using-closed-xml-in-dotnet.webp)
Generate Excel Report using Closed XML in .NET
Abdul Rahman
![Blazor WASM Communication Between Components](image/blogs/blazor/wasm/blazor-wasm-communication-between-components.webp)
Blazor WASM Communication Between Components
Abdul Rahman
![Creational Design Pattern - Builder](image/blogs/design-pattern/creational-design-pattern-builder.webp)
Creational Design Pattern - Builder
Abdul Rahman
![Structural Design Pattern - Facade](image/blogs/design-pattern/structural-design-pattern-facade.webp)
Structural Design Pattern - Facade
Abdul Rahman
![Implementing Caching using Decorator Pattern in ASP.NET WEB API](image/blogs/webapi/implementing-caching-using-decorator-pattern-in-asp-net-webapi.webp)
Implementing Caching using Decorator Pattern in ASP.NET WEB API
Abdul Rahman
![Structural Design Pattern - Decorator](image/blogs/design-pattern/structural-design-pattern-decorator.webp)
Structural Design Pattern - Decorator
Abdul Rahman
![Blazor WASM App Settings](image/blogs/blazor/wasm/blazor-wasm-app-settings.webp)
Blazor WASM App Settings
Abdul Rahman
![Blazor WASM Virtualization](image/blogs/blazor/wasm/blazor-wasm-virtualization.webp)
Blazor WASM Virtualization
Abdul Rahman
![Blazor WASM Javascript Interop and Isolation](image/blogs/blazor/wasm/blazor-wasm-javascript-interop-and-isolation.webp)
Blazor WASM Javascript Interop and Isolation
Abdul Rahman
![Blazor WASM Exception Handling and Error Boundary](image/blogs/blazor/wasm/blazor-wasm-exception-handling-and-error-boundary.webp)
Blazor WASM Exception Handling and Error Boundary
Abdul Rahman
![Blazor WASM Lazy Loading](image/blogs/blazor/wasm/blazor-wasm-lazy-loading.webp)
Blazor WASM Lazy Loading
Abdul Rahman
![Structured Logging with Serilog in ASP.NET WEB API](image/blogs/webapi/structured-logging-with-serilog-in-asp-net-webapi.webp)
Structured Logging with Serilog in ASP.NET WEB API
Abdul Rahman
![Global Exception Handling in ASP.NET WEB API](image/blogs/webapi/global-exception-handling-in-asp-net-webapi.webp)
Global Exception Handling in ASP.NET WEB API
Abdul Rahman
![Fitness Test using Net Arch Test in ASP.NET WEB API](image/blogs/webapi/fitness-test-using-net-arch-test-in-asp-net-webapi.webp)
Fitness Test using Net Arch Test in ASP.NET WEB API
Abdul Rahman
![Request Endpoint Response (REPR) pattern in ASP.NET WEB API](image/blogs/webapi/request-endpoint-response-repr-pattern-in-asp-net-webapi.webp)
Request Endpoint Response (REPR) pattern in ASP.NET WEB API
Abdul Rahman
![Using Hot Keys in Blazor WASM](image/blogs/blazor/wasm/using-hot-keys-in-blazor-wasm.webp)
Using Hot Keys in Blazor WASM
Abdul Rahman
![Prevent image leech by dynamically streaming image in Blazor WASM](image/blogs/blazor/wasm/prevent-image-leech-by-dynamically-streaming-image-in-blazor-wasm.webp)
Prevent image leech by dynamically streaming image in Blazor WASM
Abdul Rahman
![Improve performance by dynamically loading image in Blazor WASM](image/blogs/blazor/wasm/improve-performance-by-dynamically-loading-image-in-blazor-wasm.webp)
Improve performance by dynamically loading image in Blazor WASM
Abdul Rahman
![Blazor WASM Error Logging](image/blogs/blazor/wasm/blazor-wasm-error-logging.webp)
Blazor WASM Error Logging
Abdul Rahman
![Unit Testing HTTPClient in dotnet](image/blogs/http-client/unit-testing-http-client-in-dotnet.webp)
Unit Testing HTTPClient in dotnet
Abdul Rahman
![Extending HTTPClient with Custom Http Message Handlers in dotnet](image/blogs/http-client/extending-http-client-with-custom-http-message-handlers-in-dotnet.webp)
Extending HTTPClient with Custom Http Message Handlers in dotnet
Abdul Rahman
![Working with API that supports remote streaming using HTTPClient in dotnet](image/blogs/http-client/working-with-api-that-supports-remote-streaming-using-http-client-in-dotnet.webp)
Working with API that supports remote streaming using HTTPClient in dotnet
Abdul Rahman
![Save bandwidth with Compression when sending and reading data using HTTPClient in dotnet](image/blogs/http-client/save-bandwidth-with-compression-when-sending-and-reading-data-using-http-client-in-dotnet.webp)
Save bandwidth with Compression when sending and reading data using HTTPClient in dotnet
Abdul Rahman
![Free up resources with Cancellation while accessing APIs using HTTPClient in dotnet](image/blogs/http-client/free-up-resources-with-cancellation-while-accessing-apis-using-http-client-in-dotnet.webp)
Free up resources with Cancellation while accessing APIs using HTTPClient in dotnet
Abdul Rahman
![Unit Testing Hosted Services in ASP.NET WEB API](image/blogs/webapi/unit-testing-hosted-services-in-asp-net-webapi.webp)
Unit Testing Hosted Services in ASP.NET WEB API
Abdul Rahman
![Perform Background Workloads in Hosted Service using Channels in ASP.NET Web API](image/blogs/webapi/perform-background-workloads-in-hosted-service-using-channels-in-asp-net-webapi.webp)
Perform Background Workloads in Hosted Service using Channels in ASP.NET Web API
Abdul Rahman
![Printing barcode to label printer from Blazor WASM](image/blogs/blazor/wasm/printing-barcode-to-label-printer-from-blazor-wasm.webp)
Printing barcode to label printer from Blazor WASM
Abdul Rahman
![How to generate barcode in Blazor WASM](image/blogs/blazor/wasm/how-to-generate-barcode-in-blazor-wasm.webp)
How to generate barcode in Blazor WASM
Abdul Rahman
![Unit Testing Controllers in ASP.NET Web API](image/blogs/webapi/unit-testing-controllers-in-asp-net-webapi.webp)
Unit Testing Controllers in ASP.NET Web API
Abdul Rahman
![Unit Testing Service Registrations in ASP.NET Web API](image/blogs/webapi/unit-testing-service-registrations-in-asp-net-webapi.webp)
Unit Testing Service Registrations in ASP.NET Web API
Abdul Rahman
![Unit Testing Middlewares in ASP.NET Web API](image/blogs/webapi/unit-testing-middlewares-in-asp-net-webapi.webp)
Unit Testing Middlewares in ASP.NET Web API
Abdul Rahman
![Unit Testing Filters in ASP.NET Web API](image/blogs/webapi/unit-testing-filters-in-asp-net-webapi.webp)
Unit Testing Filters in ASP.NET Web API
Abdul Rahman
![Blazor WASM Publishing to AWS Amplify](image/blogs/blazor/wasm/blazor-wasm-publishing-to-aws-amplify.webp)
Blazor WASM Publishing to AWS Amplify
Abdul Rahman
![Dependency Inversion Principle in SOLID](image/blogs/solid/dependency-inversion-principle-in-solid.webp)
Dependency Inversion Principle in SOLID
Abdul Rahman
![Interface Segregation Principle in SOLID](image/blogs/solid/interface-segregation-principle-in-solid.webp)
Interface Segregation Principle in SOLID
Abdul Rahman
![Liskov Substitution Principle in SOLID](image/blogs/solid/liskov-substitution-principle-in-solid.webp)
Liskov Substitution Principle in SOLID
Abdul Rahman
![Open Closed Principle in SOLID](image/blogs/solid/open-closed-principle-in-solid.webp)
Open Closed Principle in SOLID
Abdul Rahman
![Single Responsibility Principle in SOLID](image/blogs/solid/single-responsibility-principle-in-solid.webp)
Single Responsibility Principle in SOLID
Abdul Rahman
![Convert HTML to PDF Report in .NET](image/blogs/report/convert-html-to-pdf-report-in-dotnet.webp)
Convert HTML to PDF Report in .NET
Abdul Rahman
![SOLID Principles Introduction](image/blogs/solid/solid-principles-introduction.webp)
SOLID Principles Introduction
Abdul Rahman
![Blazor WASM Dockerizing](image/blogs/blazor/wasm/blazor-wasm-dockerizing.webp)
Blazor WASM Dockerizing
Abdul Rahman
![Creational Design Pattern - Singleton](image/blogs/design-pattern/creational-design-pattern-singleton.webp)
Creational Design Pattern - Singleton
Abdul Rahman
![Design Pattern Introduction](image/blogs/design-pattern/design-pattern-introduction.webp)
Design Pattern Introduction
Abdul Rahman
![Understanding LINQ Deferred, Immediate, Streaming and Non-Streaming Executions](image/blogs/linq/understanding-linq-deferred-immediate-streaming-and-non-streaming-executions.webp)
Understanding LINQ Deferred, Immediate, Streaming and Non-Streaming Executions
Abdul Rahman
![Using LINQ For Each to Iterate Collections](image/blogs/linq/using-linq-for-each-to-iterate-collections.webp)
Using LINQ For Each to Iterate Collections
Abdul Rahman
![Using LINQ Count Min Max Average and Sum to Aggregate data](image/blogs/linq/using-linq-count-min-max-average-sum-to-aggregate-data.webp)
Using LINQ Count Min Max Average and Sum to Aggregate data
Abdul Rahman
![Using LINQ Group By to group data](image/blogs/linq/using-linq-group-by-to-group-data.webp)
Using LINQ Group By to group data
Abdul Rahman
![Simulating Left Outer Join using LINQ](image/blogs/linq/simulating-left-outer-join-using-linq.webp)
Simulating Left Outer Join using LINQ
Abdul Rahman
![Dependency Injection Lifetimes in .NET](image/blogs/dependency-injection/dependency-injection-lifetimes-in-dotnet.webp)
Dependency Injection Lifetimes in .NET
Abdul Rahman
![Using LINQ Group Join to combine data](image/blogs/linq/using-linq-group-join-to-combine-data.webp)
Using LINQ Group Join to combine data
Abdul Rahman
![Using LINQ Join to combine data](image/blogs/linq/using-linq-join-to-combine-data.webp)
Using LINQ Join to combine data
Abdul Rahman
![Using LINQ Concat to combine data](image/blogs/linq/using-linq-concat-to-combine-data.webp)
Using LINQ Concat to combine data
Abdul Rahman
![Using LINQ Union to combine data](image/blogs/linq/using-linq-union-to-combine-data.webp)
Using LINQ Union to combine data
Abdul Rahman
![Using LINQ Intersect to Find Common data](image/blogs/linq/using-linq-intersect-to-find-common-data.webp)
Using LINQ Intersect to Find Common data
Abdul Rahman
![Using LINQ Except to Find Difference in data](image/blogs/linq/using-linq-except-to-find-difference-in-data.webp)
Using LINQ Except to Find Difference in data
Abdul Rahman
![Using LINQ Sequence Equal to Find Equality of data](image/blogs/linq/using-linq-sequence-equal-to-find-equality-of-data.webp)
Using LINQ Sequence Equal to Find Equality of data
Abdul Rahman
![Using LINQ Contains to Check Data](image/blogs/linq/using-linq-contains-to-check-data.webp)
Using LINQ Contains to Check Data
Abdul Rahman
![Using LINQ Any to Find Type of Data](image/blogs/linq/using-linq-any-to-find-type-of-data.webp)
Using LINQ Any to Find Type of Data
Abdul Rahman
![Using LINQ All to Find Type of Data](image/blogs/linq/using-linq-all-to-find-type-of-data.webp)
Using LINQ All to Find Type of Data
Abdul Rahman
![Using LINQ Chunk to Split Data](image/blogs/linq/using-linq-chunk-to-split-data.webp)
Using LINQ Chunk to Split Data
Abdul Rahman
![Using LINQ Distinct to Select Unique Data](image/blogs/linq/using-linq-distinct-to-select-unique-data.webp)
Using LINQ Distinct to Select Unique Data
Abdul Rahman
![Using LINQ Skip to Select Specific Data](image/blogs/linq/using-linq-skip-to-select-specific-data.webp)
Using LINQ Skip to Select Specific Data
Abdul Rahman
![Blazor WASM Styles and CSS Isolation](image/blogs/blazor/wasm/blazor-wasm-styles-and-css-isolation.webp)
Blazor WASM Styles and CSS Isolation
Abdul Rahman
![Using LINQ Take to Select Specific Data](image/blogs/linq/using-linq-take-to-select-specific-data.webp)
Using LINQ Take to Select Specific Data
Abdul Rahman
![Using LINQ Single to Select Single Data](image/blogs/linq/using-linq-single-to-select-single-data.webp)
Using LINQ Single to Select Single Data
Abdul Rahman
![Using LINQ Last to Select Single Data](image/blogs/linq/using-linq-last-to-select-single-data.webp)
Using LINQ Last to Select Single Data
Abdul Rahman
![Using LINQ First to Select Single Data](image/blogs/linq/using-linq-first-to-select-single-data.webp)
Using LINQ First to Select Single Data
Abdul Rahman
![Python Dynamic Interop with Dotnet](image/blogs/python/python-dynamic-interop-with-dotnet.webp)
Python Dynamic Interop with Dotnet
Abdul Rahman
![Using LINQ Where to Filter Data](image/blogs/linq/using-linq-where-to-filter-data.webp)
Using LINQ Where to Filter Data
Abdul Rahman
![Using LINQ OrderBy to Sort Data](image/blogs/linq/using-linq-orderby-to-sort-data.webp)
Using LINQ OrderBy to Sort Data
Abdul Rahman
![Using LINQ to Select and Project Data](image/blogs/linq/using-linq-to-select-and-project-data.webp)
Using LINQ to Select and Project Data
Abdul Rahman
![LINQ Introduction](image/blogs/linq/linq-introduction.webp)
LINQ Introduction
Abdul Rahman
![Introducing Dependency Injection in .NET](image/blogs/dependency-injection/introducing-dependency-injection-in-dotnet.webp)
Introducing Dependency Injection in .NET
Abdul Rahman
![Types of Middleware in ASP.NET](image/blogs/middleware/types-of-middleware-in-aspnet.webp)
Types of Middleware in ASP.NET
Abdul Rahman
![Introducing Middleware in ASP.NET](image/blogs/middleware/introducing-middleware-in-aspnet.webp)
Introducing Middleware in ASP.NET
Abdul Rahman
![Blazor WASM Forms Validation](image/blogs/blazor/wasm/blazor-wasm-forms-validation.webp)
Blazor WASM Forms Validation
Abdul Rahman
![Blazor WASM Forms](image/blogs/blazor/wasm/blazor-wasm-forms.webp)
Blazor WASM Forms
Abdul Rahman
![OOPS Abstraction](image/blogs/oops/oops-abstraction.webp)
OOPS Abstraction
Abdul Rahman
![Blazor WASM Controlling Head Content](image/blogs/blazor/wasm/blazor-wasm-controlling-head-content.webp)
Blazor WASM Controlling Head Content
Abdul Rahman
![OOPS Encapsulation](image/blogs/oops/oops-encapsulation.webp)
OOPS Encapsulation
Abdul Rahman
![Blazor WASM Data Binding](image/blogs/blazor/wasm/blazor-wasm-data-binding.webp)
Blazor WASM Data Binding
Abdul Rahman
![Blazor WASM Components](image/blogs/blazor/wasm/blazor-wasm-components.webp)
Blazor WASM Components
Abdul Rahman
![Implementing TDD in C# .Net](image/blogs/tdd/implementing-tdd-in-csharp-dotnet.webp)
Implementing TDD in C# .Net
Abdul Rahman
![Introducing TDD in C# .Net](image/blogs/tdd/introducing-tdd-in-csharp-dotnet.webp)
Introducing TDD in C# .Net
Abdul Rahman
![Blazor WASM Introduction](image/blogs/blazor/wasm/blazor-wasm-introduction.webp)
Blazor WASM Introduction
Abdul Rahman
![Blazor - SPA from ASP.NET Family](image/talks/blazor-spa-from-aspnet-family.webp)
Blazor - SPA from ASP.NET Family
Abdul Rahman
![Importance of Status Code in Web API](image/blogs/webapi/webapi-importance-of-status-code.webp)
Importance of Status Code in Web API
Abdul Rahman
![Blazor WASM Dark Theme and Light Theme](image/blogs/blazor/wasm/blazor-wasm-dark-theme-and-light-theme.webp)
Blazor WASM Dark Theme and Light Theme
Abdul Rahman
With Virtualization
If the collection contains thousands of contents, rendering the contents takes a long time and users experience a noticeable UI lag. Most of the
contents aren't seen because they fall outside of the height of the <div>
element.
Instead of rendering the entire list of contents at once, replace the foreach
loop in the preceding example
with the Virtualize
component:
-
Specify
tableOfContents.Contents
as a fixed item source toVirtualize<TItem>.Items
. Only the currently visible contents are rendered by theVirtualize
component. -
Specify a context for each content with the
Context
parameter. In the following example,content
is used as the context, which provides access to each content's details.
Code Sample - With Virtualization
Demo - With Virtualization Demo
To demonstrate how list renders with virtualization, let's create a list of contents using Virtualize
Component.
If a context isn't specified with the Context
parameter, use the value of
context
in the item content template to access each contents's details:
Virtualize Component
The Virtualize
component:
Calculates the number of items to render
based on the height of the container and the size of the rendered items.Recalculates and rerenders the items
as the user scrolls.Only fetches the slice of records from an external API that correspond to the current visible region
, instead of downloading all of the data from the collection.
The item content for the Virtualize
component can include:
Plain HTML and Razor code
, as the preceding example shows.- One or more
Razor components
. - A mix of
HTML/Razor and Razor components
.
Item provider delegate
If you don't want to load all of the items into memory, you can specify an items provider delegate method to the component's
Virtualize<TItem>.ItemsProvider
parameter that asynchronously retrieves the requested items on demand.
In the following example, the LoadContents
method provides the items to the
Virtualize
component:
Code Sample - Item Provider Delegate
The items provider receives an ItemsProviderRequest
, which specifies the required number of items starting
at a specific start index. The items provider then retrieves the requested items from a database or other service and returns them as an
ItemsProviderResult<TItem>
along with a count of the total items. The items provider can choose to
retrieve the items with each request or cache them so that they're readily available.
A Virtualize
component can only accept one item source from its parameters, so don't attempt
to simultaneously use an items provider and assign a collection to Items. If both are assigned, an
InvalidOperationException
is thrown when the component's parameters are set at runtime.
Placeholder
Because requesting items from a remote data source might take some time, you have the option to render a placeholder
with item content:
Code Sample - Virtualization with Placeholder
-
Use a
Placeholder (<Placeholder>...</Placeholder>)
to display content until the item data is available. - Use
Virtualize<TItem>.ItemContent
to set the item template for the list.
Item size
The height of each item in pixels can be set with Virtualize<TItem>.ItemSize
(default: 50). By default,
the Virtualize
component measures the rendering size (height) of individual items after the initial render
occurs. Use ItemSize
to provide an exact item size in advance to assist with accurate initial render performance
and to ensure the correct scroll position for page reloads. If the default ItemSize causes some items to render outside of the currently visible view,
a second re-render is triggered. To correctly maintain the browser's scroll position in a virtualized list, the initial render must be correct. If not,
users might view the wrong items. The following example changes the height of each item from the default of 50 pixels to 25 pixels:
Code Sample - Virtualization with Item Size
Overscan count
Virtualize<TItem>.OverscanCount
determines and controls how many additional items are rendered before
and after the visible region. This setting helps to reduce the frequency of rendering during scrolling. However, higher values result in more
elements rendered in the page (default: 3). The following example changes the overscan count from the default of three items to four items:
Code Sample - Virtualization with Overscan Count
Statechanges
When making changes to items rendered by the Virtualize
component, call
StateHasChanged
to force re-evaluation and rerendering of the component.
Summary
In this article, we learn't how to use Virtualize
component to load huge data
without compromising on performance and user experience. We also learn't about Item provider delegate
,
Placeholder
, Item size
and Overscan count
.
The live in browser demo should have helped you to see what is happening in realtime while you scroll.