ComboBox with Clear Selection in Drop Down

The following article will show you how to display a clear button inside the dropdown of a ComboBox and clar the selected item from it.

ComboBox Clear Selection in DropDown

Example

For this example we will need to add the clear button (in our case for the demo we will use a Label) inside the drop down header. So we will use the ComboBox HeaderTemplate property.

<local:SelectedItemToColorConverter x:Key="SelectedItemToColorConverter"/>
<DataTemplate x:Key="ComboBoxClearButtonHeaderTemplate">
    <telerikPrimitives:RadBorder>
        <telerikPrimitives:RadBorder.MinimumHeightRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="44"/>
                <On Platform="Android" Value="48"/>
                <On Platform="UWP" Value="32"/>
            </OnPlatform>
        </telerikPrimitives:RadBorder.MinimumHeightRequest>
        <telerikPrimitives:RadBorder.BorderColor>
            <OnPlatform x:TypeArguments="Color" Default="#ECECEC">
                <On Platform="UWP" Value="Transparent"/>
            </OnPlatform>
        </telerikPrimitives:RadBorder.BorderColor>
        <telerikPrimitives:RadBorder.BackgroundColor>
            <OnPlatform x:TypeArguments="Color" Default="#F8F8F8">
                <On Platform="UWP" Value="Accent"/>
            </OnPlatform>
        </telerikPrimitives:RadBorder.BackgroundColor>
        <telerikPrimitives:RadBorder.BorderThickness>
            <OnPlatform x:TypeArguments="Thickness" Default="0, 0, 0, 1">
                <On Platform="UWP" Value="0"/>
            </OnPlatform>
        </telerikPrimitives:RadBorder.BorderThickness>
        <Label Text="Select City..."
               VerticalTextAlignment="Center"
               BackgroundColor="{Binding SelectedItem, Converter={StaticResource SelectedItemToColorConverter}}"
               TextColor="Black">
            <Label.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS" Value="3, 12, 0, 13"/>
                    <On Platform="Android" Value="8, 13, 0, 13"/>
                    <On Platform="UWP" Value="10, 6, 0, 6"/>
                </OnPlatform>
            </Label.Padding>
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ClearSelectionCommand}"/>
            </Label.GestureRecognizers>
        </Label>
    </telerikPrimitives:RadBorder>
</DataTemplate>

Here is the ComboBox definition:

<telerikInput:RadComboBox Grid.Row="1"
                          ItemsSource="{Binding Items}"
                          SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                          HeaderTemplate="{StaticResource ComboBoxClearButtonHeaderTemplate}"
                          IsDropDownOpen="{Binding IsDropDownOpen, Mode=TwoWay}"
                          Placeholder="Select City..."
                          DisplayMemberPath="Name"
                          IsClearButtonVisible="False"
                          SelectionMode="Single"
                          Margin="10, 0, 10, 0">
    <telerikInput:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerikInput:RadComboBox.BindingContext>
</telerikInput:RadComboBox>

the business model used:

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

Next we will need a clear selection command in our ViewModel, then bind it to the Label.TapGestureRecognizer Command inside the HeaderTemplate. Here is the ViewModel used:

public class ViewModel : NotifyPropertyChangedBase
{
    private City selectedItem;
    private bool isDropDownOpen;

    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };

        this.ClearSelectionCommand = new Command(this.OnClearSelectionCommandExecuted);
    }

    public ObservableCollection<City> Items { get; set; }
    public ICommand ClearSelectionCommand { get; set; }

    public City SelectedItem
    {
        get
        {
            return this.selectedItem;
        }
        set
        {
            if (this.selectedItem != value)
            {
                this.selectedItem = value;
                this.OnPropertyChanged();
            }
        }
    }

    public bool IsDropDownOpen
    {
        get
        {
            return this.isDropDownOpen;
        }
        set
        {
            if (this.isDropDownOpen != value)
            {
                this.isDropDownOpen = value;
                this.OnPropertyChanged();
            }
        }
    }

    private void OnClearSelectionCommandExecuted(object obj)
    {
        this.SelectedItem = null;
        this.IsDropDownOpen = false;
    }
}

and the SelectedItemToColorConverter class:

public class SelectedItemToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var isUWP = Device.RuntimePlatform == Device.UWP;
        return value == null 
            ? isUWP ? Color.Accent : Color.FromHex("#F8F8F8") 
            : isUWP ? Color.FromHex("#F2F2F2") : Color.White;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Example for Clear Selection in DropDown can be found in the ComboBox/How To section from the SDK Browser Application.

See Also

In this article
Not finding the help you need? Improve this article