Virtualization.razor

@page "/DropDown-List/Virtualization"

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

@*Hidden:Lines*@
@inherits SampleBaseComponent
@inject NavigationManager NavigationManager
<PageTitle>Blazor Dropdown List Virtualization Example - Syncfusion Demos</PageTitle>
<HeadContent>
    <meta name="description" content="This example demonstrates the Virtualization in Blazor Dropdown List Component. Explore here for more details." />
    <link rel="canonical" href="@canonicalURL" />
</HeadContent>
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the virtualization support of the DropDownList. 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 DropDownList 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">EnableVirtualization</a> property to <code>true</code>.
      When virtualization is enabled, DropDownList 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="control-wrapper">
        <label class="example-label">Select an item</label>
        <SfDropDownList TValue="string" TItem="Record" Placeholder="e.g. Item 1" Index=4 DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
            <DropDownListFieldSettings Text="Text" Value="ID"/>
        </SfDropDownList>
    </div>
</div>

@code{
    //Hidden:Lines
    private string canonicalURL { get; set; }
    //End:Hidden
    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()
    { 
        //Hidden:Lines
        canonicalURL = NavigationManager.Uri.Split("?")[0];
        //End:Hidden
        this.Records = Enumerable.Range(1, 150).Select(i => new Record() 
        { 
            ID = i.ToString(), 
            Text = "Item " + i, 
        }).ToList(); 
    } 
}

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

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