RadzenListBox with Multiple and Virtualization


I'm using a RadzenListBox with Multiple and Virtualization on and I'm running into some issues with this combination.

I have been able to reproduce the issue in the Demo application by adding an extra card to the ListBoxPage.razor page and by changing the instantiation of the variable multipleValues.

The first issue seems to only happen on the first click in the listbox. On the first click the binding seems to update multipleValues only with values that are currently visible. This can be seen in the gif. In the gif the listbox has selected items at the beginning and at the end of the collection. After scrolling down in the listbox one of the selected items is unselected and you can see in the Multiple selection example that selected items at the top are unselected as well

The second issue is the SelectAll functionality. The SelectAll functionality only selects items that are currently shown, is there any way to customize the SelectAll event? I already have a collection containing all the ids, I only need to be able to apply those values when the SelectAll button is pressed.

Thank you


ListBoxPage.razor changes for reproduction

<div class="col-md-6 col-lg-4 col-xl-3 p-3">
    <h4>Multiple selection with Virtualization using LoadData event</h4>
      <RadzenListBox Multiple="true" AllowVirtualization="true" AllowFiltering="true" Count="@count" LoadData=@LoadDataVirtualization @bind-Value=@multipleValues Data=@customCustomersDataVirtualization TextProperty="CompanyName" ValueProperty="CustomerID"
                               Change=@(args => OnChange(args, "ListBox with custom filtering")) Style="height:200px" Class="w-100" />

IEnumerable<string> multipleValues = new string[] { "ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "MTMTM", "WOLZA", "WILMK" };

This is expected since the other values are not yet loaded. They will be checked when the relevant data is loaded. Same applies for select all.

Thank you for your reply.

For now I've resolved the selectAll/DeselectAll issue by hiding the button through CSS as it's not really needed.

I have resolved the other issue by binding an empty collection to @bind-Value and selecting the items afterwards by calling SelectItem(item, false) on the listbox for each item that should be selected on initialization.I wouldn't recommend this approach but it works as a temporary fix.

The cause for the issue seems to be the method SelectItemFromValue that is called within DropdownBase in the method OnParametersSetAsync. SelectItemFromValue is called for each item that is bound with @bind-Value but it will only update the internal collection selectedItems if the value can be found in the view, and due to virtualization a lof of items are out of view. SelectItemFromValue needs the view because it wants to add to the collection selectedItems which is a collection of the same type as the parameter Data (In the case of the demo that would be Customer).