Virtualization.razor

@page "/ComboBox/Virtualization"

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

@*Hidden:Lines*@
@inherits SampleBaseComponent
@*End:Hidden*@

<SampleDescription>
    <p>This example demonstrates the virtualization support of the ComboBox. The component has 150 items bound to it; however, when you open the dropdown popup, only few items are loaded based on the popup height, and the remaining items are loaded while scrolling.</p>
</SampleDescription>
<ActionDescription>
    <p>
        The ComboBox supports virtualization, which improves UI performance for large amounts of data.
        To enable virtualization, set the <a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization" aria-label="Class reference of EnableVirtualization property in ComboBox">EnableVirtualization</a> property to <code>true</code>.
        When virtualization is enabled, ComboBox doesn't render 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 while scrolling.
        Virtualization works with both local and remote data.
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="row">
        <div class="col-lg-6">
            <div class="control-wrapper">
                <label class="example-label">Local Data</label>
                <SfComboBox TValue="string" TItem="Record" Placeholder="e.g. Item 1" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
                    <ComboBoxFieldSettings Text="Text" Value="Id" />
                </SfComboBox>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="control-wrapper">
                <label class="example-label">Remote Data</label>
                <SfComboBox TValue="string" TItem="EmployeeData" PopupHeight="130px" EnableVirtualization="true" AllowFiltering="true" Placeholder="Select a name" Query="@RemoteDataQuery">
                    <SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Employees" Offline="true" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
                    <ComboBoxFieldSettings Text="FirstName" Value="FirstName" />
                </SfComboBox>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="control-wrapper">
                <label class="example-label">Grouping</label>
                <SfComboBox TValue="string" TItem="Record" Placeholder="e.g. Item 1" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
                    <ComboBoxFieldSettings Text="Text" Value="Id" GroupBy="Group" />
                </SfComboBox>
            </div>
        </div>
    </div>
</div>

@code{
    public List<Record>? Records { get; set; }
    public Query LocalDataQuery = new Query().Take(6);
    public Query RemoteDataQuery = new Query().Take(6);

    public class Record
    {
        public string? Id { get; set; }
        public string? Text { get; set; }
        public string? Group { get; set; }
    }
    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
        public string? Country { 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;
        }
    }
}

<style>
    .control-wrapper {
        max-width: 240px;
        margin: 0 auto;
        padding: 50px 0px 0px;
    }

    .example-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
</style>