Virtualization in DropDown List

22 Jun 20266 minutes to read

To get started quickly with virtualization in the Blazor DropDownList component, watch the video below.

The DropDownList component includes a virtual scrolling feature designed to enhance UI performance, particularly for handling large datasets. By enabling the EnableVirtualization option, the DropDownList intelligently manages data rendering, ensuring only a subset of items is initially loaded when the component is rendered. As you interact with the dropdown, additional items are dynamically loaded as you scroll, creating a smooth and efficient user experience.

This feature is applicable to both local and remote data scenarios, providing flexibility in its implementation. For instance, consider a case where the DropDownList is bound to a dataset containing 150 items. Upon opening the dropdown, only a few items are loaded initially, based on the height of the popup. As you scroll through the list, additional items are fetched and loaded on-demand, allowing you to effortlessly explore the complete dataset.

CSHTML

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

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

@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(); 
    } 
}

Grouping with virtualization

The DropDownList supports grouping together with virtualization. Use DropDownListFieldSettings.GroupBy to categorize items by a field in the data source. After grouping is applied, virtualization behaves similarly to local data binding: group headers and items are rendered on demand as the user scrolls. When using a remote data source, an initial request may retrieve the necessary data to perform grouping; thereafter, the grouped content is virtualized during display.

The following sample demonstrates grouping with virtualization.

CSHTML

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

<SfDropDownList TValue="string" TItem="Record" Placeholder="e.g. Item 1" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
    <DropDownListFieldSettings GroupBy="Group" Text="Text" Value="ID"/>
</SfDropDownList>

@code{
    public Query LocalDataQuery = new Query().Take(6); 
    public class Record 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
        public string Group { get; set; }
    } 
    public List<Record> Records { get; set; } 
    protected override void OnInitialized()
    {
        var random = new Random();
        this.Records = Enumerable.Range(1, 150).Select(i => new Record()
            {
                ID = i.ToString(),
                Text = "Item " + i,
                Group = GetRandomGroup(random)
            }).ToList();
    }
    private string GetRandomGroup(Random random)
    {
        switch (random.Next(1, 5))
        {
            case 1:
                return "Group A";
            case 2:
                return "Group B";
            case 3:
                return "Group C";
            case 4:
                return "Group D";
            default:
                return string.Empty;
        }
    }
}

Keyboard interaction

Users can navigate virtualized content using keyboard actions. The following keys load items or pages on demand as needed:

Key	Action
ArrowDown	Loads the next virtual item when the selection reaches the last item of the current page.
ArrowUp	Loads the previous virtual item when the selection reaches the first item of the current page.
PageDown	Loads the next page and selects the last item.
PageUp	Loads the previous page and selects the first item.
Home	Loads the initial page and selects the first item.
End	Loads the last page and selects the last item.