Long delay in selecting and deselecting check boxes in the Dropdown

[Maryam Sarikhani]

Dear Support Team,

I would like to bring to your attention a performance issue we are experiencing with the multi-select dropdown component in our Blazor project. We have noticed that selecting and deselecting checkboxes in the dropdown menu is noticeably slow, regardless of the number of items available.

The specific issues we are encountering are as follows:

* When the dropdown is open, deselecting items is slow and happens one by one But When That is closed, using the clear button works quickly.

Could you please provide us with any potential solutions or workarounds to improve the performance of the multi-select dropdown? Your prompt attention to this issue is highly appreciated, as it affects the user experience of our application.

Thank you for your support and cooperation.

Attachment: Test_56d38c22.rar

[Yohapuja Selvakumaran]

Hi Maryam Sarikhani,

We have validated the issue you reported regarding the slow performance of the MultiSelect component when handling more than 500 items. This slowdown occurs because all the data is being loaded at once.

To resolve this, we recommend enabling the virtualization feature. Virtualization ensures that only a small set of items (initially 20) is loaded, and additional items are dynamically fetched as you scroll, significantly improving performance.

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

Here’s an example of how you can implement it:

 

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

 

<SfMultiSelect TValue="string[]" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" ShowDropDownIcon="true" ShowSelectAll=true SelectAllText="Select All" UnSelectAllText="Unselect All" ShowClearButton="true" AllowFiltering="true" Mode="VisualMode.CheckBox" FilterBarPlaceholder="Search Game" PopupHeight="160px" EnableVirtualization="true" Width="300px" EnablePersistence="true">

   <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>

</SfMultiSelect>

 

@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, 5000).Select(i => new Record() 

       { 

           ID = i.ToString(), 

           Text = "Item " + i, 

       }).ToList(); 

   }

}

 

 

 

 

 

You can find the runnable sample below,

Sample: https://blazorplayground.syncfusion.com/rNhfjOMjLkcSYnVS

For further details and to know more information about virtualization, you can refer to the documentation and demo below,

Demo: https://blazor.syncfusion.com/demos/multiselect-dropdown/virtualization?theme=fluent2

Documentation: https://blazor.syncfusion.com/documentation/multiselect-dropdown/virtualization

Regards,

Yohapuja S