Virtualization in DropDown List

30 Jan 20235 minutes to read

The DropDownList has been provided with virtualization to improve the UI performance for a large amount of data when the 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 number of items will be loaded on each scrolling action in the popup. It can work with both local and remote data.

Specify the count of the items to be appended in the popup element using ItemsCount property when the EnableVirtualization is enabled.

In the following sample, if the scroll action takes place, it will append 20 more items to the popup element.

  • 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" ItemsCount=10>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
        <DropDownListEvents TValue="string" TItem="Record" OnClose="((e) => e.Cancel = true)"></DropDownListEvents>
    </SfDropDownList>
    
    @code{
        public Query LocalDataQuery = new Query().Take(5); 
        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(); 
        } 
    }

    Local data

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

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

    Blazor DropDownList with virtualization of local data

    Remote data

    In the following code, the remote data bound to the DropDownList component, but only 10 items will be loaded to the popup when you open the popup. Remaining number of items will be loaded on each scrolling action in the popup.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    @using Syncfusion.Blazor.Data 
    <SfDropDownList TValue="string" TItem="OrderDetails" Width="300px" EnableVirtualization=true Placeholder="Select a name" Query="@RemoteDataQuery">
         <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"/>
         <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"/>
    </SfDropDownList>
    @code{
         public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(10).RequiresCount();
        public class OrderDetails
        {
            public int? OrderID { get; set; }
            public string CustomerID { get; set; }
            public int? EmployeeID { get; set; }
            public double? Freight { get; set; }
            public string ShipCity { get; set; }
            public bool Verified { get; set; }
            public DateTime? OrderDate { get; set; }
            public string ShipName { get; set; }
            public string ShipCountry { get; set; }
            public DateTime? ShippedDate { get; set; }
            public string ShipAddress { get; set; }
        }
    }

    Blazor DropDownList with virtualization of remote data

    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.

  • 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" ItemsCount=10>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
        <DropDownListEvents TValue="string" TItem="Record" OnClose="((e) => e.Cancel = true)"></DropDownListEvents>
    </SfDropDownList>
    
    @code{
        public Query LocalDataQuery = new Query().Take(5); 
        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(); 
        } 
    }

    Limitation of virtualization

    • Virtualization is not supported in the grouping feature.