I added a Radzen dropdown component in a server-side razor file (render mode is default interactiveauto) using IQueryable.
Codes of the razor file:
//...
@inject CultureHelper CultureHelper
//...
<RadzenDropDown Name="DropDownVirtualization" @bind-Value=selectedValue Data=@Currencies Style="width: 100%; max-width: 400px;" AllowVirtualization="true"
TextProperty="CurrencyCultureInfo" ValueProperty="CultureCode" TValue="string" AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains" />
//...
IEnumerable<Culture> Currencies = new List<Culture>();
string selectedValue = "en-AU";
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
Currencies = CultureHelper.Cultures;
}
The Mainlayout.razor code as follows:
@inherits LayoutComponentBase
@using Microsoft.AspNetCore.Components.Web;
<RadzenComponents />
<RadzenDialog @rendermode=InteractiveWebAssembly />
<RadzenNotification @rendermode=InteractiveWebAssembly />
<div class="page">
//...
The list variable has many data.
But the dropdown arrow seems not to work and the list can not open when I click the arrow on the right.
There are no relevant errors on the browser. The data seems to be loaded into the front page successfully. Because I set a default value into the selected variable in OnInitializedAsync, and it shows the according TextProperty value.
I checked the razor page source in the browser.
<div class="rz-dropdown valid rz-clear" onmousedown="Radzen.activeElement = null" __internal_preventDefault_onclick __internal_stopPropagation_onclick style="width: 100%; max-width: 400px;" tabindex="0" id="LRkZMsQ3mk">
<div class="rz-helper-hidden-accessible">
<input aria-haspopup="listbox" readonly="" type="text" tabindex="-1" name="DropDownVirtualization" value="en-AU" id="DropDownVirtualization" aria-label="en-AU" />
</div>
<span class="rz-dropdown-label rz-inputtext">
AUD [English (Australia)]
</span>
<div class="rz-dropdown-trigger rz-corner-right">
<span class="rz-dropdown-trigger-icon rzi rzi-chevron-down"></span>
</div>
<div id="popup-LRkZMsQ3mk" class="rz-dropdown-panel " style="display:none; box-sizing: border-box">
<div class="rz-dropdown-filter-container">
<input aria-label="Search" id="search-LRkZMsQ3mk" tabindex="0" placeholder="" class="rz-dropdown-filter rz-inputtext" autocomplete="off" aria-autocomplete="none" type="text" />
<span class="rz-dropdown-filter-icon rzi rzi-search"></span>
</div>
<div class="rz-dropdown-items-wrapper" style="max-height:200px;overflow-x:hidden">
<ul class="rz-dropdown-items rz-dropdown-list" role="listbox">
<div style="height: 0px; flex-shrink: 0;"></div><div style="height: 0px; flex-shrink: 0;"></div> </ul>
</div>
</div>
<i class="rz-dropdown-clear-icon rzi rzi-times" __internal_stopPropagation_onclick></i>
</div>
</div>
__internal_preventDefault_onclick __internal_stopPropagation_onclick seems the error message in the HTML.
I try to copy the same component codes to a client-side razor. It works well. No issues occur.
DropdownDataGrid has the same issue for me.