Virtualization
Efficiently handle thousands of items using virtual scrolling
Large Dataset - Basic Virtualization
Efficiently render thousands of items with automatic virtual scrolling. The Select component automatically enables virtualization when the item count exceeds the threshold.
<Select TValue="int"
Items="@largeItems"
VirtualScrollThreshold="100"
@bind-Value="@selectedLargeId"
Placeholder="Search 10,000 products..." />
@code {
private List<SelectOption<int>> largeItems = Enumerable.Range(1, 10000)
.Select(i => new SelectOption<int>
{
Id = i,
Text = $"Product #{i:00000} - {GetCategory(i)}"
})
.ToList();
private static string GetCategory(int i) => (i % 5) switch
{
0 => "Electronics",
1 => "Clothing",
2 => "Books",
3 => "Sports",
_ => "Home & Garden"
};
}Auto-Enable Threshold Demo
Virtualization automatically enables and disables based on the item count relative to the threshold. Use the slider to see the threshold in action.
<!-- Virtualization auto-enables when Items.Count > VirtualScrollThreshold -->
<Select TValue="int"
Items="@items"
VirtualScrollThreshold="100"
@bind-Value="@selectedId" />
<!-- With fewer than 100 items → standard rendering -->
<!-- With 100+ items → virtual scrolling automatically enabled -->Custom Threshold Configuration
Tune the virtualization threshold for different scenarios. Lower thresholds are ideal for complex templates, while higher thresholds work well for simple lists.
Low Threshold (50 items)
Virtualizes sooner - better for complex templates
High Threshold (500 items)
Virtualizes late - acceptable for simple lists
<!-- Low threshold: virtualize early (better for complex templates) -->
<Select VirtualScrollThreshold="50" ... />
<!-- High threshold: virtualize late (acceptable for simple lists) -->
<Select VirtualScrollThreshold="500" ... />
<!-- Disable virtualization entirely -->
<Select VirtualScrollThreshold="@int.MaxValue" ... />Virtualization with Search
Virtual scrolling works seamlessly with search functionality. Filtered results are virtualized just like the full list, maintaining performance across both scenarios.
<Select TValue="int"
Items="@countries"
VirtualScrollThreshold="100"
MinimumResultsForSearch="0"
CaseSensitiveSearch="false"
@bind-Value="@selectedCountryId"
Placeholder="Search 5,000 items..." />Performance Guidelines
When and how to configure virtual scrolling for optimal performance.
Threshold Recommendations
| Threshold | Dataset Size | Use Case |
|---|---|---|
50 |
50-500 items | Complex item templates with custom formatting |
100 (default) |
100-5,000 items | Most applications - optimal default for general use |
500 |
500+ items | Simple text-only lists without formatting |
int.MaxValue |
Any | Disable virtualization completely (not recommended) |
Key Behaviors
- Automatic: Virtualization is automatically enabled when item count exceeds the threshold - no manual toggle needed
- Dynamic: Works seamlessly with search and filtering - only visible items need rendering
- Compatible: Can be combined with multi-select, disabled states, and other Select features
- Efficient: Maintains ~15 DOM nodes regardless of having 10,000 items
Performance Metrics
- Virtual scrolling reduces initial render time significantly with large datasets
- Scroll performance remains smooth due to efficient DOM management
- Search filtering within virtualized lists is nearly instant
- Memory usage stays low with only visible items in the DOM