We are building an application that uses the Radzen Blazor Components. We never realized this but it seems there is a architectural problem in the Listbox. Below is our code.
<RadzenListBox listboxstyle disableshiftselect
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
TextProperty="DisplayName"
TValue="CourseParticipant"
Data=@CourseParticipants>
<Template Context="participant">
@{
var courseParticipant = (participant as CourseParticipant);
}
<div disableshiftselect
@onclick=@(args => ParticipantClicked(args, courseParticipant)) >
<RadzenCheckBox TValue="bool"
Value=@(courseParticipant.Selected)
Disabled=@courseParticipant.IsInThisGroup />
<span>
<span class="student" style=@(courseParticipant.IsStudent ? "" : "display:none")>
<RadzenIcon Icon="school" />
</span>
<span class="reexamstudent" style=@(courseParticipant.IsReexamStudent ? "" : "display:none")>
<RadzenIcon Icon="school" />
</span>
<RadzenLabel Text=@(courseParticipant.DisplayName)
MouseEnter=@(args => ShowStudentInformationToolTip(args, courseParticipant))
MouseLeave=@(args => CloseToolTip(args)) />
@if (courseParticipant == leftMultiSelectHandler.LastSelectedObj)
{
<span class="thisgroup">
<RadzenIcon Icon="push_pin"
MouseEnter=@(args => ShowMultiSelectToolTip(args))
MouseLeave=@(args => CloseToolTip(args)) />
</span>
}
@if (courseParticipant.IsInThisGroup)
{
<span class="thisgroup">
<RadzenIcon Icon="circle" />
</span>
}
@if (courseParticipant.IsInOtherGroup)
{
<span class="othergroup">
<RadzenIcon Icon="circle"
MouseEnter=@(args => ShowOtherGroupToolTip(args, courseParticipant))
MouseLeave=@(args => CloseToolTip(args)) />
</span>
}
</span>
</div>
</Template>
</RadzenListBox>
As you can see we decided not to use the Multiple="true" because it does not work very well in combination with a template. With a template and Multiple="true" the checkbox on the item appears above the content of the template which is not very nice.
So we decided to use a RadzenCheckBox inside the template and all seems to works just fine. Until today.
We found that once items are selected and one uses the filter to limit the number of items in the list the items that become invisible still have there checkboxes selected.
You can see this behavior on your own demo page in the 'ListBox with multiple selection' example. If you type 'Anton' into the filter the selected items disappear. If you then clear the filter the selected items return and are still selected.
Because the databinding works on a list in the page that contains all items possible we are not aware items have become invisible.
Is there a work around for this. I would hate to disable the filtering because it really helps our users to focus on the items needed.