Issue with Virtualization in Dropdown List and Request for Support in Dropdown Tree
Hello Syncfusion Team,
I'm currently working with the Virtualization feature in the Dropdown List, using the code example provided in your documentation here: Dropdown List Virtualization Documentation.
Here’s the code I’m using:
@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();
}
}
I am encountering the following issue:
- When scrolling down, the loading skeleton displays as expected. However, when scrolling back up, the interface occasionally gets a blank white background, as shown in the attached screenshot. This white background replaces the loaded items. It seems as though items that were already loaded are not properly retained in the UI when scrolling back up.
Steps to Reproduce:
- Scroll down until new elements are loaded.
- Scroll back up to the top.
Expected Behavior:
When scrolling up, I would like the dropdown to display all previously loaded items without needing to re-load them, thus avoiding the white background issue. For example, if my dropdown has 700 items, it should initially load and display 50 items. As I scroll down, it should load an additional 50 items at a time (from items 50–100, then 100–150, etc.). By the time I have scrolled down to load 150 items, I expect that when I scroll back up, items 1–150 will already be available without any additional loading or UI glitches.
I have two questions:
- Is there a way to resolve the UI glitch (the white background) described above when using the Dropdown List with virtualization?
- Can the Virtualization feature be enabled for the Dropdown Tree component? I noticed the
DropDownTreeFieldhas aQueryproperty but lacks anEnableVirtualizationproperty.
Hi Tien Pham,
Query1: "Is there a way to resolve the UI glitch (the white background) described above when using the Dropdown List with virtualization?"
Thank you for reaching out to us. We have created a sample based on the code snippet you shared, and we observed that the items are loaded properly in the popup when scrolling down and back to the top. Please refer to the video illustration below for a better understanding:
Sample: https://blazorplayground.syncfusion.com/hjLfMsifpfIwXSIs
To assist you further, could you please share the syncfusion package version and steps to replicate the issue or provide a sample that reproduces the issue? This will help us investigate the issue more effectively.
We appreciate your understanding and cooperation.
Query2: "Can the Virtualization feature be enabled for the Dropdown Tree component? I noticed the DropDownTreeField has a Query property but lacks an EnableVirtualization property."
For this query, we have created a new forum thread to assist you further. Please follow the link below for additional help:
Request for Support in Dropdown Tree - from 195145 | Blazor Forums | Syncfusion
Regards,
Priyanka K
