Virtualization in Blazor MultiSelect Dropdown Component

30 Jan 20232 minutes to read

The MultiSelect has been provided virtualization to improve the UI performance for a large amount of data when EnableVirtualization is true. This feature doesn’t render out the entire data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load on each scrolling action in the popup. It can work with both local and remote data.

In the following code 150 items bound to the component, but only 6 items will load to the popup when you open the popup. Remaining set number of items will load on each scrolling action in the popup.

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data 

<SfMultiSelect TValue="string[]" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code{
    public Query LocalDataQuery = new Query().Take(6); 
    public class Record 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    public List<Record> Records { get; set; } 
    protected override void OnInitialized()
    { 
        this.Records = Enumerable.Range(1, 150).Select(i => new Record() 
        { 
            ID = i.ToString(), 
            Text = "Item " + i, 
        }).ToList(); 
    } 
}

Blazor MultiSelect with virtualization

ItemsCount

The data can be fetched in popup based on ItemsCount, when enabled the EnableVirtualization. ItemsCount is applicable only when EnableVirtualization is used as true. ItemsCount is depends on EnableVirtualization.

Default value of ItemsCount is 5.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns
    @using Syncfusion.Blazor.Data 
    
    <SfMultiSelect TValue="string[]" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery"  EnableVirtualization="true" ItemsCount="@ItemsCount">
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code{
        public Query LocalDataQuery = new Query().Take(6); 
        public class Record 
        { 
            public string ID { get; set; } 
            public string Text { get; set; } 
        } 
        public List<Record> Records { get; set; } 
        protected override void OnInitialized()
        { 
            this.Records = Enumerable.Range(1, 150).Select(i => new Record() 
            { 
                ID = i.ToString(), 
                Text = "Item " + i, 
            }).ToList(); 
        }
    
        public int ItemsCount { get; set; } = 10;
    }