Is there an example of virtualization for the DropDownList control?

[Randy Magruder]

I have a scenario where the data source for a dropdown list can become large, and I'm looking to implement virtualization to control memory allocation... I'm not seeing any examples specific to the dropdownlist component, does that mean it is not supported?

There may be a more general pattern for vitualization use in the library that I am not aware of?

Thank you!

[Deepak Ramakrishnan]

Hi Randy, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with provided details and found that we can enable the virtualization by setting ‘EnableVirtualization’ property as ‘true’ which loads the data based on the user’s demand. Kindly refer the following code and sample for your reference. Also as per your suggestion we will include the respective section in our documentation and will refresh it in any one of our upcoming releases. Until then we appreciate your patience. 

 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Data 

 

<SfDropDownList TValue="string" TItem="OrderDetails" 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"></SfDataManager> 

    <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings> 

</SfDropDownList> 

 

@code{ 

 

    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(20); 

    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; } 

    } 

} 

 

 

Sample Link :  https://www.syncfusion.com/downloads/support/forum/168819/ze/BlazorApp1-1112693542 

API documentation :  https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization

Thanks, 

Deepak R.