How to make a selectable list that is also self filterable?

[Jesse Knott]

Hello, I am trying to make a SfComboBox that gives the user a set of options they can choose from.

As the user selects an item I want it to be shown on the screen and removed from the list of options.

When I run my code, the item is selected and displays on the form, but the item still remains in the list of options in the combo box but the icon is missing, Also the icons I associate with the options seems to lose its index and the icons no longer correlate to the items in the list.

When the page loads an existing record, there is a comma separated list of options that had been selected that gets parsed. The selected items are added to a new list of my type ``ObservableCollection<RetailerSupplies>`` and applied to the l

See the below code.

In the ViewModel.cs I create a list of options for the user to select from

///<summary>
///GetsorsetstheSuppliesListListofoptionsforretailerssupplies.
///summary>
publicObservableCollection<RetailerSuppiles>SuppliesList
{
get=>supplies;
set
{
SetProperty(refsupplies,value,nameof(SuppliesList));
OnPropertyChanged(nameof(SuppliesList));
}
}
 
//Createanewlistofitemstoselectfromthecombobox
 
///<summary>
///privatestorageSelected
///summary>
privateObservableCollection<RetailerSuppiles>selected;
 
///<summary>
///GetsorsetsthevalueforSelected
///summary>
publicObservableCollection<RetailerSuppiles>Selected
{
get=>selected;
 
set
{
SetProperty(refselected,value,nameof(Selected));
OnPropertyChanged(nameof(Selected));
}
}
 
///<summary>
///Populatethesupplyoptionsfortheretailers.
///summary>
privatevoidBuildSupplyOptions()
{
SuppliesList=newObservableCollection<RetailerSuppiles>
{
 newRetailerSuppiles{Name="Archery",Image=ArcheryIcon},
newRetailerSuppiles{Name="Camping",Image=TentIcon},
newRetailerSuppiles{Name="Gear",Image=SwissArmyIcon},
newRetailerSuppiles{Name="Other",Image=AccessoryIcon},
};
}

Here are my utility functions for the property changed events.

///<summary>
		///Eventhandlerforchangingvalueinaproperty.
		///summary>
		///<paramname="propertyName">Nameofthepropertybeingchanged.param>
		protectedvoidOnPropertyChanged([CallerMemberName]stringpropertyName="")
		{
			Logger.Trace($"OnPropertyChanged({propertyName})for{PropertyChanged?.ToString()}.");
			varchanged=PropertyChanged;
			if(changed==null)
			{
				Logger.Trace($"OnPropertyChanged({propertyName}):changed==null,returning.");
				return;
			}
 
			Logger.Trace($"OnPropertyChanged({propertyName}):Invokingchangedaction.");
			changed.Invoke(this,newPropertyChangedEventArgs(propertyName));
		}
 
		///<summary>
		///Setsthevalueofaproperty.
		///summary>
		///<typeparamname="T">Nameoftypeofproperty.typeparam>
		///<paramname="backingStore">Oldvalue.param>
		///<paramname="value">Newvalue.param>
		///<paramname="propertyName">Nameofpropertybeingchanged.param>
		///<paramname="onChanged">eventhandlerforchange.param>
		///<returns>Resultas<seecref="bool"/>.returns>
#pragmawarningdisableS3343//Callerinformationparametersshouldcomeattheendoftheparameterlist
		protectedboolSetProperty<T>(refTbackingStore,Tvalue,[CallerMemberName]stringpropertyName="",ActiononChanged=null)
#pragmawarningrestoreS3343//Callerinformationparametersshouldcomeattheendoftheparameterlist
		{
			Logger.Trace($"SetProperty<{typeof(T)}>:bs<{typeof(T)}>{backingStore}.v<{typeof(T)}>{value}.prop'{propertyName}'.");
			if(EqualityComparer<T>.Default.Equals(backingStore,value))
			{
				returnfalse;
			}
 
			backingStore=value;
			onChanged?.Invoke();
			OnPropertyChanged(propertyName);
			returntrue;
		}

My xaml to display the list is

<combobox:SfComboBox
x:Name="Supplies"
DataSource="{BindingPath=RetailerSupplies,Mode=TwoWay}"
EnableAutoSize="True"
IndicatorTextColor="{StaticResourceKey=cTblSelected}"
IsEditableMode="False"
IsSelectedItemsVisibleInDropDown="False"
MultiSelectMode="Token"
TextSize="12"
TokensWrapMode="Wrap"
WidthRequest="200">
<combobox:SfComboBox.TokenSettings>
<combobox:TokenSettings
BackgroundColor="{StaticResourceKey=cFrameBGColor}"
CornerRadius="5"
DeleteButtonColor="{StaticResourceKey=cFrameBorderColor}"
FontSize="13"
TextColor="{StaticResourceKey=cAltTextColor}"/>
combobox:SfComboBox.TokenSettings>
<combobox:SfComboBox.DropDownButtonSettings>
<combobox:DropDownButtonSettings
BackgroundColor="{StaticResourceKey=cFrameBGColor}"
FontColor="{StaticResourceKey=primary-title-color}"
HighlightedBackgroundColor="{StaticResourceKey=cHilightColor}"/>
combobox:SfComboBox.DropDownButtonSettings>
combobox:SfComboBox>

This is the code I use to build the initial state. The string ``viewModel.MyRetailer.Supplies`` is saved as a comma separated list when the page is saved

///<summary>
///TheRecoverOptions
///summary>
privatevoidRecoverOptions()
{
//Recoverthelistfromthedatabaseandmakeitalistofstrings
varsupplieslist=newList<string>(viewModel.MyRetailer.Supplies.Split(','));
 
//Iteratethroughthearrayofstrings,andbuildthelistofselecteditemsforthe
//combobox.
foreach(stringsinsupplieslist)
{
RetailerSuppilessup=viewModel.SuppliesList.FirstOrDefault(x=>x.Name.Equals(s,StringComparison.OrdinalIgnoreCase));
viewModel.Selected.Add(sup);
}
 
Supplies.SelectedItem=viewModel.Selected;
Supplies.FilteredItems=viewModel.Selected;
 
}

When the page is created for a new record and the above code is not run, the icons appear in the proper order.

When I select an item, it is displayed on the screen, but the icons order is changed, and the item I selected is displayed on the bottom of the list in the combo box. Since the item is displayed on the front page, I want it removed from the combobox list. If the user clicks on the item it should be removed from the screen and be returned to the combobox.

I am sorry if this is not clear. I hope it is.

Thank you!

[Suganya Sethuraman]

Hi Jesse,

Greetings from Syncfusion.

Query: “I want it to be shown on the screen and removed from the list of options”

We have analyzed your query. We have achieved your requirement by setting the SfComboBox IsSelectedItemsVisibleInDropDown property as false.

Code Snippet: 

        <comboBox:SfComboBox 

            x:Name="comboBox" 

            AllowFiltering="True" 

            DataSource="{Binding EmployeeCollection}" 

            DisplayMemberPath="Name" 

            EnableAutoSize="True" 

            IsEditableMode="True" 

            IsSelectedItemsVisibleInDropDown="False" 

            MultiSelectMode="Token" 

            TokensWrapMode="Wrap" /> 

Please have the sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxSelection650304892

Please check the sample if it meets your requirements and if not, could you please share more details about your requirement. If possible, please share screenshot of your requirement or provide complete runnable sample. It will help us to provide better solution at the earliest.

Regards,
Suganya Sethuraman.