.NET MAUI ComboBox Commands

The .NET MAUI ComboBox provides commands that let you manipulate its selection.

SelectAll Command

SelectAllCommand (ICommand)—Selects all items from the source.

To use the SelectAll command, set the selection mode to Multiple. If you invoke the command in Single selection mode, the ComboBox throws an exception.

Clear Selection Command

ClearSelectionCommand (ICommand)—Sets the selection to null. If you use the Multiple selection mode, this command will clear all selected items. You can override the default behavior and create a custom command.

The example below shows both cases, the default ClearSelectionCommand execution and custom ClearSelectionCommand implementation:

xaml

<HorizontalStackLayout Spacing="5"
                       Margin="0, 0, 0, 12">
    <Button Text="Default Clear Command"
            Command="{Binding Source={x:Reference comboBox}, Path=ClearSelectionCommand}" 
            AutomationId="customClearButton"/>
    <Button Text="Custom Clear Command"
            Clicked="ExecuteCustomCommanClicked"
            AutomationId="defaultClearButton"/>
</HorizontalStackLayout>

<telerik:RadComboBox x:Name="comboBox"
                     Placeholder="Select City!"
                     SelectionMode="Multiple"
                     IsDropDownClosedOnSelection="False"
                     WidthRequest="{OnPlatform MacCatalyst=300, WinUI=300}"
                     HorizontalOptions="{OnIdiom Default=Fill, Desktop=Start}"
                     ItemsSource="{Binding Items}"
                     DisplayMemberPath="Name"
                     AutomationId="comboBox"/>

c#

class CustomClearSelectionCommand : ComboBoxClearSelectionCommand
{
    public override async void Execute(object parameter)
    {
        bool executeDefault = await App.Current.Windows[0].Page.DisplayAlert("Command", "Execute command?", "Yes", "No");
        if (executeDefault)
        {
            base.Execute(parameter);
        }
    }
}

private void ExecuteCustomCommanClicked(object sender, EventArgs e)
{
    this.comboBox.ClearSelectionCommand = new CustomClearSelectionCommand();
    this.comboBox.ClearSelectionCommand.Execute(true);
}

Remove Token Command

• RemoveTokenCommand(ICommand)—Removes a token from the ComboBox selection in Multiple selection mode. This command is called from the token's DataTemplate when the user taps the label for clearing the token.

Example with the default RemoveTokenCommand

The example below shows how you can call the default RemoveTokenCommand from a custom TokenTemplate implementation:

xaml

<telerik:RadComboBox ItemsSource="{Binding Items}"
                     Placeholder="Select a city"
                     SelectionMode="Multiple"
                     DisplayMemberPath="Name"
                     WidthRequest="{OnPlatform MacCatalyst=300, WinUI=300}"
                     HorizontalOptions="{OnPlatform MacCatalyst=Start, WinUI=Start}">
    <telerik:RadComboBox.TokenTemplate>
        <DataTemplate>
            <telerik:RadBorder BackgroundColor="#80CBC4"
                               CornerRadius="{OnPlatform Default=4, Android=16, iOS=8}"
                               Margin="{OnPlatform Default='2, 4', WinUI='2, 3'}"
                               VerticalOptions="Center">
                <HorizontalStackLayout Padding="{OnPlatform Android='16, 6', iOS='8, 6, 8, 7', MacCatalyst='5, 2.5', WinUI='10, 3, 8, 2'}"
                                       Spacing="4">
                    <Label Text="{Binding Name}"
                           TextColor="Black"
                           FontSize="{OnPlatform iOS=13, MacCatalyst=13}"
                           VerticalTextAlignment="Center" />
                    <Label FontFamily="TelerikFontExamples"
                           Text="&#xE80A;"
                           FontSize="{OnPlatform Default=12, Android=14, iOS=14}"
                           TextColor="#198679"
                           Margin="{OnPlatform Android='0, 3, 0, 0'}"
                           VerticalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding RemoveTokenCommand, Source={RelativeSource AncestorType={x:Type telerik:RadComboBox}}}"
                                                  CommandParameter="{Binding BindingContext, Source={RelativeSource Self}}" />
                        </Label.GestureRecognizers>
                    </Label>
                </HorizontalStackLayout>
            </telerik:RadBorder>
        </DataTemplate>
    </telerik:RadComboBox.TokenTemplate>
</telerik:RadComboBox>

Example with a custom RemoveTokenCommand

The example demonstrates a custom RemoveTokenCommand implementation - there is a confirmation dialog before the default command to be executed.

1. Create a custom command class that inherits from ComboBoxRemoveTokenCommand and override, for example, its Execute method:

c#

public class CustomComboBoxRemoveTokenCommand : ComboBoxRemoveTokenCommand
{
    public override async void Execute(object parameter)
    {
        bool executeDefault = await App.Current.Windows[0].Page.DisplayAlert("Confirm", "Remove token?", "Yes", "No");
        if (executeDefault)
        {
            base.Execute(parameter);
        }
    }
}

2. Apply the newly created command class to the RadComboBox's RemoveTokenCommand:

xaml

<telerik:RadComboBox ItemsSource="{Binding Items}"
                     Placeholder="Select a city"
                     SelectionMode="Multiple"
                     DisplayMemberPath="Name"
                     WidthRequest="{OnPlatform MacCatalyst=300, WinUI=300}"
                     HorizontalOptions="{OnPlatform MacCatalyst=Start, WinUI=Start}">
    <telerik:RadComboBox.RemoveTokenCommand>
        <local:CustomComboBoxRemoveTokenCommand />
    </telerik:RadComboBox.RemoveTokenCommand>
</telerik:RadComboBox>

See Also

• Configuration
• Data Binding
• Edit Mode & Search
• Templates