Listbox problem with selected items

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.

1 Like

This is by design and does not have a workaround. Filtering does not change the selection.

The only work around I can think of is disabling the 'Multiple' and 'AllowFiltering' and add my own textbox at the top and filter the list myself. It almost makes me wish I had written my own ListBox instead of using the Radzen one.

If this is the behavior you want then you are better of implementing your own ListBox. The Radzen components will not clear their value (selection) during filtering.

We implemented our own code for filtering and selecting in combination with the ListBox. Makes it a bit bulky but it works.

Maybe you could think of a way to detect wether an item in the list is visible or not.

FWIW, I used Multiple="true" and surrounded the markup in my template with an outer div tag with margin-top: -20px; margin-left 35px; and that seems to line the checkbox up pretty well with my content all on the "same line". I know this chain is a few months old. I also realize this doesn't apply to the main issue discussed here - selection changing on filtering. It only addresses a passing comment about listbox templates not playing well with "Multiple". But just in case others stumble across this discussion (as I did) hopefully this will be helpful.

1 Like