SfComboBox SelectionChanged MVVM Binding To ICommand

[Matthew Bailey]

I have a need to link SfComboBox's SelectionChanged to an ICommand in my ViewModel.

I already know that there's the Behavior Method as linked here. - but how do I control it from a ViewModel instead so that I have access to all my other bindings rather than using a method in the code-behind?

[Hemalatha Marikumar]

Hi Matthew,

Greetings from Syncfusion.

We have analyzed your query and you can trigger the ComboBox Selection Changed event in ViewModel as like below code snippet.

ViewModel: 

  public class MainPageViewModel : ViewModelBase, INavigationAware 

    { 

        public DelegateCommand<object> SelectionChangedCommand { get; set; } 

  

  

        private ObservableCollection<Employee> employeeCollection; 

        public ObservableCollection<Employee> EmployeeCollection 

        { 

            get { return employeeCollection; } 

            set { employeeCollection = value; } 

        } 

        INavigationService _navigationService; 

        public MainPageViewModel(INavigationService navigationService) : base(navigationService) 

        { 

            SelectionChangedCommand = new DelegateCommand<object>(SetContent); 

            EmployeeCollection = new ObservableCollection<Employee>(); 

            EmployeeCollection.Add(new Employee() { ID = 1, Name = "Frank" }); 

            EmployeeCollection.Add(new Employee() { ID = 2, Name = "James" }); 

            EmployeeCollection.Add(new Employee() { ID = 3, Name = "Steve" }); 

            EmployeeCollection.Add(new Employee() { ID = 4, Name = "Lucas" }); 

            EmployeeCollection.Add(new Employee() { ID = 5, Name = "Mark" }); 

            EmployeeCollection.Add(new Employee() { ID = 6, Name = "Michael" }); 

            EmployeeCollection.Add(new Employee() { ID = 7, Name = "Aldrin" }); 

            EmployeeCollection.Add(new Employee() { ID = 8, Name = "Jack" }); 

            EmployeeCollection.Add(new Employee() { ID = 9, Name = "Howard" }); 

        } 

  

        public void SetContent(object obj) 

        { 

  

        } 

    } 

  

XAML: 

<combobox:SfComboBox IsEditableMode="True" DataSource="{Binding EmployeeCollection}" MaximumDropDownHeight="300"  ShowSuggestionsOnFocus="True" DisplayMemberPath="Name" x:Name="comboBox"> 

            <combobox:SfComboBox.Behaviors> 

                <local:EventToCommandBehavior Command="{Binding SelectionChangedCommand}"  EventName="SelectionChanged"/> 

            </combobox:SfComboBox.Behaviors> 

        </combobox:SfComboBox> 

We have created sample based on your requirement please find the sample form below location.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxCommand613176966.zip 

 

 

Regards, 

Hemalatha M. 

[Matthew Bailey]

Thank you for the reply,

but is there a way to do this without incorporating Prism's INavigationAware interface?

[Hemalatha Marikumar]

Hi Mathew,

We have analyzed your query and created sample based on your requirement without using prism. Please download the sample from below location.

Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxCommand-2054739153.zip 

 

Code snippet: 

public class MainPageViewModel 

    { 

        public ICommand SelectionChangedCommand { get; set; } 

  

        private ObservableCollection<Employee> employeeCollection; 

        public ObservableCollection<Employee> EmployeeCollection 

        { 

            get { return employeeCollection; } 

            set { employeeCollection = value; } 

        } 

  

        public MainPageViewModel() 

        { 

            SelectionChangedCommand = new Command<object>(ComboBoxSelectionChanged); 

            EmployeeCollection = new ObservableCollection<Employee>(); 

            EmployeeCollection.Add(new Employee() { ID = 1, Name = "Frank" }); 

            EmployeeCollection.Add(new Employee() { ID = 2, Name = "James" }); 

            EmployeeCollection.Add(new Employee() { ID = 3, Name = "Steve" }); 

            EmployeeCollection.Add(new Employee() { ID = 4, Name = "Lucas" }); 

            EmployeeCollection.Add(new Employee() { ID = 5, Name = "Mark" }); 

            EmployeeCollection.Add(new Employee() { ID = 6, Name = "Michael" }); 

            EmployeeCollection.Add(new Employee() { ID = 7, Name = "Aldrin" }); 

            EmployeeCollection.Add(new Employee() { ID = 8, Name = "Jack" }); 

            EmployeeCollection.Add(new Employee() { ID = 9, Name = "Howard" }); 

        } 

  

        public  void ComboBoxSelectionChanged(object obj) 

        { 

            var selectionChangedArgs = obj as SelectionChangedEventArgs; 

            var selectedItem = (selectionChangedArgs.Value as Employee).Name; 

        } 

    } 

Please let us know if you have any other queries.

Regards, 

Hemalatha M.