1. Home
  2. Forum
  3. Blazor
  4. Slow performance of DropdownList

Slow performance of DropdownList

Hi,

I'm using the Dropdown List control to select a country in a client-side Blazor app. Because it's countries, the list contains about 200 records. As you can see in the attached file, it performs really bad (takes between 3-4 seconds as reported by Chrome) before the list expands the first time. Upon second click, it's fast. I therefore assume that it simply takes too long to create the items in the list.
The objects bound just contain an ID and CountryName, so they aren't complex objects. Note that I have the exact same performance when we load just plain strings.

The code for the list is as follows:
<EjsDropDownList Placeholder="Select Country"
                                     @bind-Value="@IncidentStateViewModel.LocationInfoViewModel.CountryId"
                                     DataSource="@Countries"
                                     Enabled="@IncidentStateViewModel.CanEdit">
                        <DropDownListFieldSettings Text="CountryName" Value="Id"></DropDownListFieldSettings>
                    </EjsDropDownList>

The list that I'm binding to is populated in OnInitializedAsync:

public ObservableRangeCollection<LkpCountryDto> Countries { get; set; }

protected override async Task OnInitializedAsync()
{
     Countries.AddRange(IncidentStateViewModel.LocationInfoViewModel.LkpCountryDtos);
}

Is there anything I can do from my end to make it perform better? 


Attachment: ddl_3dd0d674.zip

29 Replies
BC Berly Christopher Syncfusion Team February 13, 2020 03:14 PM UTC

Hi Gill, 
  
Greetings from Syncfusion support.  
  
While checking the issue, we suggest you to use the Take in the Query property to load the required data initially in the DropDownList popup. If you enable the AllowFiltering property as true, matching value for the typed character will be fetched from the whole data. Due to this, we can reduce the performance issue in the DropDownList while loading large amount of data.  
@using Syncfusion.EJ2.Blazor.Data 
@using Syncfusion.EJ2.Blazor.DropDowns 
<EjsDropDownList TItem="OrderDetails" TValue="string" Query="@RemoteDataQuery" AllowFiltering="true"> 
    <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.ODataAdaptor"></EjsDataManager> 
    <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
@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; } 
    } 
} 

  
We have prepared the sample and attached it below. 
  
Regards, 
Berly B.C  


AS ashimaz June 19, 2020 04:32 PM UTC

Hi,

I am using SfDropDownList with SfDataManager WebApiAdaptor.

With AllowFiltering=true dropdown list is slow after click item from dropdownlist. It takes a while to display selected item. My table have only 20 rows.

<SfDropDownList TValue="int" TItem="SimpleList" @bind-Value="@Id" AllowFiltering=true >
                                <SfDataManager Headers="@HeaderData" Url="api/DocumentEntryType" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true">SfDataManager>
                                <DropDownListFieldSettings Text="Name" Value="Id" />
                            SfDropDownList>
This only happens when I use @bind-Value="@Id".
Is there any solution to this? I am using Blazor Client (18.1.58)


EK Edward Kagan replied to Berly Christopher June 19, 2020 09:05 PM UTC

Hi Gill, 
  
Greetings from Syncfusion support.  
  
While checking the issue, we suggest you to use the Take in the Query property to load the required data initially in the DropDownList popup. If you enable the AllowFiltering property as true, matching value for the typed character will be fetched from the whole data. Due to this, we can reduce the performance issue in the DropDownList while loading large amount of data.  
@using Syncfusion.EJ2.Blazor.Data 
@using Syncfusion.EJ2.Blazor.DropDowns 
<EjsDropDownList TItem="OrderDetails" TValue="string" Query="@RemoteDataQuery" AllowFiltering="true"> 
    <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.ODataAdaptor"></EjsDataManager> 
    <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
@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; } 
    } 
} 

  
We have prepared the sample and attached it below. 
  
Regards, 
Berly B.C  


This is not an acceptable answer.  There should not be a "workaround" for 200 basic items in a dropdown list.  A native <select> can handle many times more without a hiccup.  I've seen so many people, me included, complaining about the performance.  I'm convinced there is a leak somewhere.  I've found and reported a problem before where events were being fired multiple times, thought fixing that would alleviate the issue but it did not. Slow loading is not even the worst part of the problem, it's selecting an item from the list that causes the entire interface to freeze for 2-3 seconds.  I think preview versions going back months have not had this problem and a bug was introduced somewhere along the way.  Your team needs to spend some serious time instrumenting the dropdown and listbox controls to figure out exactly where the problem areas are.  As these controls sit at the moment, they are practically unusable.

EK Edward Kagan replied to ashimaz June 19, 2020 09:10 PM UTC

Hi,

I am using SfDropDownList with SfDataManager WebApiAdaptor.

With AllowFiltering=true dropdown list is slow after click item from dropdownlist. It takes a while to display selected item. My table have only 20 rows.

<SfDropDownList TValue="int" TItem="SimpleList" @bind-Value="@Id" AllowFiltering=true >
                                <SfDataManager Headers="@HeaderData" Url="api/DocumentEntryType" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true">SfDataManager>
                                <DropDownListFieldSettings Text="Name" Value="Id" />
                            SfDropDownList>
This only happens when I use @bind-Value="@Id".
Is there any solution to this? I am using Blazor Client (18.1.58)


I can confirm this issue, the entire interface freezes for several seconds when selecting an item.

EK Edward Kagan June 19, 2020 09:11 PM UTC

I am amazed that a so-called workaround involves implementing otherwise completely unnecessary odata endpoints to work around buggy components.

SP Sureshkumar P Syncfusion Team June 24, 2020 02:06 AM UTC

Hi Edward,  
   
Thanks for the patience.   
   
We have confirmed the reported issue “Performance issue on selection from the DropDownList” as a bug at our end and this fix will be included in our upcoming patch release after Volume 2 Main release which is scheduled on mid of June 2020. We appreciate your patience until then.  
   
You can track the status of the reported issue from the below feedback link.  
   
Regards,  
Sureshkumar P 


AS ashimaz July 4, 2020 09:01 AM UTC

Hi, Any update on this?

SP Sureshkumar P Syncfusion Team July 7, 2020 04:05 AM UTC

Hi Ashimaz, 
 
Sorry for the inconvenience caused. 
 
Currently we are working on this issue fix with high priority. We will include the fix in this month second week patch release after released the Volume-2 main release. Which is scheduled on July 22nd,2020. We appreciate your patience. 
 
Regards, 
Sureshkumar P 


KA Kamran replied to Sureshkumar P July 25, 2020 05:02 AM UTC

Hi Ashimaz, 
 
Sorry for the inconvenience caused. 
 
Currently we are working on this issue fix with high priority. We will include the fix in this month second week patch release after released the Volume-2 main release. Which is scheduled on July 22nd,2020. We appreciate your patience. 
 
Regards, 
Sureshkumar P 


I am having the same performance issue in DropDownList.

I updated Blazor Controls to latest release to V18.2.0.46. But in release notes nothing have been updated related to DropDownList.

https://blazor.syncfusion.com/documentation/release-notes/18.2.46/?type=all#menu

SP Sureshkumar P Syncfusion Team July 27, 2020 05:19 AM UTC

Hi Kamran,  
   
Sorry for the inconvenience caused.   
   
While fixing the reported issue, we have faced more complexities due to our present DOM structure of the component. So, we have planned to consider this issue in our component improvement. This improvement will be available in our Volume 3 Main release scheduled on end of September 2020. We appreciate your patience until then.  
   
Regards,  
Sureshkumar P 


RH Robert Handzlik replied to Sureshkumar P October 12, 2020 10:53 AM UTC

Hi Kamran,  
   
Sorry for the inconvenience caused.   
   
While fixing the reported issue, we have faced more complexities due to our present DOM structure of the component. So, we have planned to consider this issue in our component improvement. This improvement will be available in our Volume 3 Main release scheduled on end of September 2020. We appreciate your patience until then.  
   
Regards,  
Sureshkumar P 


Hi, Any update on this?

SP Sureshkumar P Syncfusion Team October 13, 2020 06:13 AM UTC

Hi Robert, 
 
We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35 is rolled out and is available for download under the following link.  
 
 
 
 
If you want to load more data in the dropdownlist component. then we suggest you add the EnableVirtualization property to support as virtualization scrolling support to achieve your requirement. 
 
Please find the code example here: 
<SfDropDownList TValue="string" TItem="Data" Placeholder="e.g: Aero" EnableVirtualization="true" 
                DataSource="@Country"> 
    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 
    <DropDownListEvents TItem="Data" TValue="string" ValueChange="OnChange" OnValueSelect="Select"></DropDownListEvents> 
</SfDropDownList> 
 
 
 
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,             
Sureshkumar P. 
 


ME Mohamed Elmalky replied to Sureshkumar P November 4, 2020 03:11 PM UTC

Hi Robert, 
 
We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35 is rolled out and is available for download under the following link.  
 
 
 
 
If you want to load more data in the dropdownlist component. then we suggest you add the EnableVirtualization property to support as virtualization scrolling support to achieve your requirement. 
 
Please find the code example here: 
<SfDropDownList TValue="string" TItem="Data" Placeholder="e.g: Aero" EnableVirtualization="true" 
                DataSource="@Country"> 
    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 
    <DropDownListEvents TItem="Data" TValue="string" ValueChange="OnChange" OnValueSelect="Select"></DropDownListEvents> 
</SfDropDownList> 
 
 
 
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,             
Sureshkumar P. 
 


Hello,

Does this update address the delay when selecting an item from the drop down only when @bind-Value="@Id" is set?

Originally reported by @ashimaz Replied On June 19, 2020 04:32 PM UTC

Thank you, 

SP Sureshkumar P Syncfusion Team November 5, 2020 07:24 AM UTC

Hi Mohamed, 
 
Thanks for your update. 
 
As per our previous update. The EnableVirtualization property support will resolve the selected delay issue in the dropdownlist component. we suggest you upgrade the latest version and enable the EnableVirtualization property to resolve the issue.  
 
Regards, 
Sureshkumar P 


MT Muhammad Tanveer Khan December 11, 2020 12:35 PM UTC

I am stuck with the same problem.
Have about 5000 records, tried EnableVirtualization, but still facing the same issue

VS Vignesh Srinivasan Syncfusion Team December 14, 2020 06:50 PM UTC

Hi Muhammad, 
 
We have created the sample based on your scenario with 5000 dataSource and EnableVirtualization. We could not replicate it in our end. Please find the sample link below   
 
 
Kindly check the above sample in your end. If the issue still persist, kindly replicate the issue in above sample or else provide issue replicating sample. 
 
Regards, 
 
Vignesh Srinivasan. 


WI Wilson replied to Vignesh Srinivasan January 8, 2021 03:06 PM UTC

Hi Muhammad, 
 
We have created the sample based on your scenario with 5000 dataSource and EnableVirtualization. We could not replicate it in our end. Please find the sample link below   
 
 
Kindly check the above sample in your end. If the issue still persist, kindly replicate the issue in above sample or else provide issue replicating sample. 
 
Regards, 
 
Vignesh Srinivasan. 


I have the same issue since I started to use DDL for large data. This EnableVirtualization feature does not resolve the performance issue.I upgraded to version 18.4.033 and tested with the folllowing DDL scritpt in a EditForm

     <SfDropDownList ID="Postcode" TValue="int" TItem="PostcodeModel" Placeholder="@_L.GetText("Postcode")" Query="@PostcodeQuery"  
 AllowFiltering="true" EnableVirtualization="true" ShowClearButton="true" @bind-Value="@(SelectedData.Id_postcode)">
   <DropDownListTemplates TItem="PostcodeModel">
 <ActionFailureTemplate>
 <span class='norecord'>@_L.GetText("DataFetchFail") </span>
  </ActionFailureTemplate>
 </DropDownListTemplates>
 <SfDataManager Url="@apiUrlPostcode" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
 <DropDownListFieldSettings Text="postcode" Value="Id"></DropDownListFieldSettings>
 </SfDropDownList>
         <ValidationMessage For="@(() => SelectedData.Id_postcode)"></ValidationMessage>

@code{
     public Query PostcodeQuery = new Query().Take(12); 
}

The API data contains only 2741 records, the API controller end point is on the same machine. During Editform loads, I have to wait about 7 seconds for the DDL spnner to stop spinning. And, when I click on the DDL, it will take another 3 seconds to pop up. I am unable to select any item until another few seconds later. If I hit the clear button, i have to go thru the same process again. 

It is very frastruated to work on this slow component. The entire application has become useless. I also tried on the combobox but same issue. Not to mention I have a few look up which contain more than 100 thousands records. 

Please advise.
Thanks




VS Vignesh Srinivasan Syncfusion Team January 12, 2021 02:09 PM UTC

Hi Wilson, 
 
We have created sample based on your requirement with the 5000 records. We cannot able to replicate your issue please find the video demonstration and sample link below. 
 
 
 
Kindly check with the above sample. If your still facing the issue, If possible, try to reproduce the reported issue in above sample or share the issue reproducible sample 
 
 
Regards, 
 
Vignesh Srinivasan.

CJ chris johansson January 14, 2021 08:52 PM UTC

Yes i'm also having the same issue with combo boxes with virtualization on... This worked in 18.3.53 but then i went to 4.0.33 and it stopped working.. spins forever...
I'm glad i'm not the only one.. i have reported this issue as an incident but they couldn't replicate the issue.. There is an issue here and needs to be fixed otherwise i cannot upgrade to the latest versions

I have combo boxes outside and inside a grid.. and they do this always in the grid and sometimes outside the grid... and once you click into the cell that has a combo box it also takes a while to load... Its an issue that needs to be fixed

CJ chris johansson January 15, 2021 04:06 PM UTC

Wilson, if you go back to 18.3.53 can you tell me if that works?

WI Wilson replied to chris johansson January 17, 2021 03:53 PM UTC

Wilson, if you go back to 18.3.53 can you tell me if that works?

"Wilson, if you go back to 18.3.53 can you tell me if that works?"

Hi Chris,

You are right!!! 

After switch back to 18.3.0.53, my DDL and Compbobox's had become very fast! Hope Syncfusion can resolve this ASAP.

Wilson
 

VS Vignesh Srinivasan Syncfusion Team January 19, 2021 05:47 AM UTC

Hi Wilson,  
   
As mentioned earlier, we could not replicate the issue in our latest version. Kindly share us any additional details or sample to showcase the issue in our end 
   
Regards,  
 
Vignesh Srinivasan. 


CJ chris johansson February 2, 2021 05:06 PM UTC

Wilson upgrade to the latest version. apparently it seems to be fixed now

VS Vignesh Srinivasan Syncfusion Team February 3, 2021 04:54 AM UTC

Hi chris, 
 
Thanks for your update. 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Vignesh Srinivasan 


RC Rogerio C Mauri April 22, 2021 10:06 PM UTC

The feature of adding take to the query is not functional.

Think of an interface as an add page and an edit page and both with the 'take (30)' feature, for example.

On the addition page, the user chooses an item that is in the second call, position 59, for example.

When opening the edit page, the DDL field will be blank, since the active item is not in the first take call.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 26, 2021 03:27 AM UTC

Hello Rogerio, 

Thanks for your update. 

We are validating your reported scenario. We will check and update the further details in two busines days (28th April 2021). 

We appreciate your patience until then. 

Thanks, 
Jeyanth. 


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 28, 2021 04:08 PM UTC

Hello Rogerio, 

Sorry for inconvenience. 

We are checking your reported scenario. We will check and update the further details in two business days (30th April 2021). 

We value your patience. 

Thanks, 
Jeyanth. 


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 30, 2021 12:53 PM UTC

Hello Rogerio, 

Thanks for the patience. 

We validated the reported feedback. We would like to know you that we can achieve the requirement by dynamically setting the value for Dropdownlist component. That is whenever the value of the Dropdownlist in Add page gets changed, we need to set the value of Dropdownlist in Edit Page. But as of now, we have not provided changing value dynamically with Query option. We have considered this as a bug in our end. This will be included in the patch release which is scheduled on May 19, 2021. We would like to thank your for your valuable feedback and helping us to improve our products. You can track the status using the below feedback link. 


We appreciate your patience until then. 

Thanks, 
Jeyanth. 


BC Berly Christopher Syncfusion Team May 19, 2021 10:19 AM UTC

Hi Rogerio,    
  
Thanks for the patience.     
  
We are glad to announce that our latest release in the version 19.1.64 has been rolled out successfully and in that release, we have included the “Dynamic value not set to control when EnableVirtualization is true”.  So, we suggest you upgrade our Syncfusion packages to the latest version to resolve this issue in your end.    
  
  
Regards, 
Berly B.C

Loader.
Up arrow icon