RadzenListBox, multiselect, virtualization, PageSize and reload-in-code

Radzen.Blazor Components
1

Hello,

question 1: multiselect and virtualization bug
i'm following the code example "Virtualization using LoadData event" from here -> ListBox component

<RadzenListBox AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
Data="@allElementsFiltered" LoadData="@OnCustomFilter"
AllowVirtualization="true" Count="@count"
@bind-Value="selectedElements" Multiple="true" Placeholder="Select...">

List<MitreObject> allElementsFiltered;
List<MitreObject> selectedElements;

the virtualization works ok, when scrolling down or up, "OnCustomFilter" method gets called with top/skip parameter, etc.

but there is an issue with the selections:

select three items

image
image859×803 31.8 KB

scroll down, scroll back up, selection gone

image
image861×806 32 KB

in the debugger i can see the selection list contains three items:
image

so the information what was selected is there, it's just not represented in the UI correctly.
can this be fixed component-side?

question 2: there is a parameter "PageSize"
image
but it doesn't do anything. can the RadzenListBox do paging like the grid? i would prefer that over virtualization.

question 3: force reload
there will be external filter conditions in the UI, when i select one of them I would like to request the listbox to reload data (trigger OnCustomFilter callback). is there a way to do that? like .Reload() in the DataGrid component?

thanks and happy holidays!

2

Hi @RobertRo,

You might need to bind SelectedValue since you are using LoadData and the component cannot perform internally lookup over the entire collection. Virtualization is like paging however with the vertical scrollbar - PageSize can be used in similar way. There is no built-in paging like DataGrid however you can use the Pager component to page any list including ListBox. Virtualize component also can be accessed to call refresh if needed:

Merry Christmas! :christmas_tree:

3

@enchev great, thanks.
issue #3 solved with

await box.Virtualize.RefreshDataAsync();

i figured out the solution to issue #1 like this:

image
image699×167 22.7 KB 

List<string> selectedValues { get; set; } = new List<string>();
RadzenListBox<List<string>>? box;

now scrolling / external filtering works, checkboxes stay checked, and selectedValues keeps a list of all selected items in the list.

and i'll check the pager component out, good to know.

cheers

4

@enchev sorry to bother you again, but when i use Guid in ValueProperty instead of string the application crashes
Unhandled exception rendering component: '.' or '(' or string literal expected

image
image1118×262 19.9 KB

this seems to be a bug introduced in 4.2.3. versions prior to that (4.2.2, 4.1.15, 4.1.1 ... tested a few) do not crash and work fine.

sample code:

@using Radzen
@using Radzen.Blazor

<PageTitle>Listbox Test</PageTitle>

<RadzenListBox Data="@data" AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"

               ValueProperty="guid"
               @bind-Value=selectedElements 
               TValue="List<Guid>"

               Multiple="true" Placeholder="Select...">
               <Template>
                    @($"{(context as SomeObject).name}")
               </Template>
            </RadzenListBox>

@code {
    private List<SomeObject> data = new List<SomeObject>();
    private List<Guid> selectedElements = new List<Guid>();

    protected override void OnInitialized()
    {
        data.Add(new SomeObject("object 1"));
        data.Add(new SomeObject("object 2"));
        data.Add(new SomeObject("object 3"));
    }

    private class SomeObject
    {
        public Guid guid { get; set; }
        public string name { get; set; }
        public SomeObject(string n)
        {
            guid = Guid.NewGuid();
            name = n;
        }
    }
}
5

Thanks for the report! We will check what might cause this regression and we will release update early next week.

6

I think we fixed such a problem some time ago. Try with a newer version than 4.2.3 - the latest is 4.4.7.

7

sadly, i have this issue with the latest version as well (4.4.7)
(when investigating i found a forum post with the same error message, so i tried older versions and wanted to let you know my findings)

8

just a quick report that 4.4.8 still suffers from this issue.

9

Hi @RobertRo,

Indeed we were able to reproduce the problem however we are still not sure what's causing it and how to fix - hopefully we will provide fix by the end of this week.

UPDATE: The issue is caused because of the property name (guid) - we will do our best to handle this in our next update.

10

4.4.9 fixes it.
Many thanks!