1. Home
  2. Forum
  3. Blazor
  4. Virtualisation of dropdownlist items with local data

Virtualisation of dropdownlist items with local data

Hi,

I was wondering if anyone has an example of virtualising dropdownlist items using local data (i.e. using a locally defined List rather than a web api as the data source)

I can get it to work to a certain extent with filtering. The reason I ask is that some of my drop downs contain 1000+ items and this causes major slowdown in performance, but I still want the user to be able to access all the items if needed, as well as when filtered - hence the request for being able to do skip & take on local data.

Thanks

4 Replies
SP Sureshkumar P Syncfusion Team April 30, 2020 06:56 AM UTC

Hi Matthew, 
 
Greetings from Syncfusion support.  
 
Currently we don’t have virtual scrolling support for our dropdownlist component. But in your case, you can achieve the performance improvement using our filter event. We have created the sample based on your requirement.  
 
Kindly refer the code example. 
<SfDropDownList @ref="DDLObj" TItem="GameFields" TValue="string" AllowFiltering="true" Query="@Query" PopupHeight="230px" Index="2" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 
    <DropDownListEvents TValue="string" Filtering="OnFiltering"></DropDownListEvents> 
    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
</SfDropDownList> 
@code { 
 
    SfDropDownList<string, GameFields> DDLObj; 
 
    public Query Query = new Query().Take(3); 
    public class GameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    private List<GameFields> Games = new List<GameFields>() { 
        new GameFields(){ ID= "Game1", Text= "American Football" }, 
        new GameFields(){ ID= "Game2", Text= "Badminton" }, 
        new GameFields(){ ID= "Game3", Text= "Basketball" }, 
        new GameFields(){ ID= "Game4", Text= "Cricket" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10", Text= "Tennis"}, 
     }; 
    public string DropVal; 
    public string ChangeValue { get; set; } = "Basketball"; 
 
    public void OnFiltering(FilteringEventArgs args) 
    { 
        args.PreventDefaultAction = true; 
        var query = new Query(); 
        if (args.Text != "") 
        { 
            query = new Query().Where(new WhereFilter() 
            { 
                Field = "Text", 
                value = args.Text, 
                Operator = "startswith", 
                IgnoreCase = true 
            }); 
        } else 
        { 
            query = new Query().Take(3); 
        } 
 
        this.DDLObj.Filter(Games, query); 
    } 
} 
 
Also, we have already logged the virtual scrolling support as a feature in our end. It will be included in our any one of upcoming release. We appreciate your patience until then.  
 
Please find the feedback link here: https://www.syncfusion.com/feedback/13013  
 
Regards, 
Sureshkumar P 
 


MA Matthew April 30, 2020 10:43 AM UTC

Hi,

Thanks, I already had this working with the filter. I will just have to be patient and wait for the virtual scrolling update - thanks for letting me know that is on the roadmap.

Cheers.

SP Sureshkumar P Syncfusion Team May 1, 2020 05:24 AM UTC

Hi Matthew, 
 
Thanks for your update. We will get back to you once the feature was included in our source.  
 
Regards, 
Sureshkumar P 


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 5, 2021 05:47 AM UTC

Hi Matthew,

 
We have provided virtual scrolling support for Combobox and Dropdownlist in 2020 Volume 3. To enable virtual scrolling, EnableVirtualization property to be set as true. We suggest you to upgrade the Syncfusion packages to the latest for this support. Please find the release notes below. 


 


 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 


 
Regards,  
Jeyanth. 


Loader.
Up arrow icon