Setting SelectedItem databound property to null clears the text as well

[Raihan Iqbal]

I have a use case where I need to clear the selected item but I can only do this in my view model. When I set the view model property that is databound to SelectedItem to null, it clears the selection however it also clears the default text. I have attached the code sample. When I click on the Clear Selection button, I want the combobox to revert back to it's original unselected state and this needs to be done in the view model and in the page code-behind.
Attachment: ComboBoxSample_1dc4ad22.zip

[Ruba Shanmugam]

Hi Raihan,

Thank you for using Syncfusion software.

We have validated your query and prepared a sample based on your requirement and you can set the SelectedItem property as null and clear the text as well in ViewModel by using Button Command property like in below code snippet.

Code snippet:

MainPage.XAML:

<combobox:SfComboBox DataSource="{Binding EmployeeCollection}" 
                                           Style="{StaticResource EscavoxComboboxStyle}"
                                           SelectedItem="{Binding SelectedInventory, Mode=TwoWay}" 
                                           DisplayMemberPath="Name" 
                                           SelectedValuePath="ID" Text="Select Employee" />
 

<Button x:Name="btnClearSelection" Text="Clear Selection" Command="{Binding ButtonCommand}" />

EmployeeViewModel.Cs:

public ICommand ButtonCommand => new Command(SetSelectedValueToNull);

private void SetSelectedValueToNull()
{
      this.SelectedInventory = null;
}
 

Please find the sample link from below.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_ViewModel-2070865655

Please let us know, if you have any other concerns.

Regards,
Ruba Shanmugam

[Raihan Iqbal]

Hi Ruba,

Your solution is functionally doing exactly what my solution was doing. Let me clarify my issue a bit more.

This is the default state of the Combobox:

This is what it looks like after I've made a selection:

Now when I hit clear selection, it clears the selected item which is fine but the display text has also disappeared. 

My requirement is that the display text should NOT be cleared. The Combobox should return to its initial state (first screenshot).

[Ruba Shanmugam]

Hi Raihan,

Thanks for the update.

We would like to let you know that when you clear the SelectedItem for SfComboBox, the SfComboBox Text will also clear. This is current behavior. You can achieve your requirement by passing the SfComboBox object in the Button Command as below and by setting the SfComboBox Text again.

Code Snippet:

MainPage.XAML:

<combobox:SfComboBox DataSource="{Binding EmployeeCollection}"
             Style="{StaticResource EscavoxComboboxStyle}"
             SelectedItem="{Binding SelectedInventory, Mode=TwoWay}"
             DisplayMemberPath="Name"
             SelectedValuePath="ID" Text="Select Employee" />
<Button x:Name="btnClearSelection" Text="Clear Selection"
                                 Command="{Binding ButtonCommand}"
                                 CommandParameter="{x:Reference comboBox}"/>

EmployeeViewModel.Cs:

public ICommand ButtonCommand => new Command(SetSelectedValueToNull);

private void SetSelectedValueToNull()
{
               this.SelectedInventory = null;
               (comboBox as Syncfusion.XForms.ComboBox.SfComboBox).Text = "Select Employee";
} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxSample-748478200

Please let us know, if you have any other concerns.

Regards,
Ruba Shanmugam