hi, i am currently working on a project using blazor wasm and radzen 2.16.1. Now, my project is almost finished, but I just realized there is a performance issue with the dropdown component. When I select an item using the mouse, it looks like there is a delay of about 1 second. At first I thought something was wrong with my code, but when I tried the example of the dropdown component at this link https://blazor.radzen.com/dropdown. The same thing happened. Then I also thought maybe my computer is slow, but even when I use a faster computer, there is still a delay when selecting items. After doing some testing, it turns out that when I omit @bind-Value = "myProperty", the delay doesn't appear. I conclude that the cause of the delay is due to the binding. Is there a solution to this problem? thank you.
<RadzenDropDown AllowClear="true"
TValue="int?"
Name="CaraCuciTangan"
@bind-Value="dataForSubmit.CaraCuciTanganId"
Data="@(caraCuciTangan?.Select(r => new { Id = r.Id, Text = r.Text }).Distinct())"
TextProperty="Text" ValueProperty="Id"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
AllowFiltering="true"
Placeholder="Cara cuci tangan" Style="width:100%" />
<RadzenRequiredValidator Component="CaraCuciTangan" Text="Cara cuci tangan diperlukan" Popup="@popup"
Style="position: absolute;z-index:2" />
Are you sure the delay is due to something with the Radzen code and not an issue with the browser or some plugins that load with your profile? When I try the demo link, select is almost instantaneous. Also looking at the demo code, only 3 of the 7 dropdowns have the @bind-value property.
I'm using Chrome with no extensions on Windows 10 running an Intel Core i7-8665U with 32GB of RAM.
I ask because I'm using this component and while it works as designed for me, I want to understand what conditions could cause issues for my users.
I am facing the same issue. And its not the machine RAM. Machine RAM can help upto certain limit only.
Here is how to replicate it.
Have 17 Multiple selected drop downs and out of 17, 16 drop downs should have at least greater than 200 items and in the remaining one just keep 5-6 items . When page loads select all the items in all drop downs by default on page load (all items in drop downs should be selected by default programatically via bind-value).
Now try to Select and deselect any item in any drop it will take atleast 5-10 seconds. Even the one with just 5-6 items will also have same slow performance.
I'm not a Radzen employee or contributor to the code. I had simply caught the OPs post and had run the code on my machine and found a less significant perfromance issue.
I think it's a limitation of Blazor rather than anything the Radzen team is doing, because if you try to use the out-of-the-box dropdowns in a complex or data intensive scenario you do run into similar performance issues.
My best guess, is that due to data binding, when one value changes, it's re-rendering the entire component for every component that data is bound to. Forgetting Blazor, and just doing a straight HTML/CSS/JS dropdown with lots of options can take significant time to render. However, with JS we can manipulate a single element of the dropdown in the DOM. I think Blazor is basically removing the whole component and replacing it again which comes at high cost.