Programmatically select chips from the chipgroup

[Daniel Christopher Eclipse]

I have a chipgroup with a Filter type. How do you select chips from the chipgroup?

Setting the binded SelectedItems doesn't seem to update the UI.

[Devakumar Dhanapoosanam]

Hi Daniel Christopher Eclipse, 

 

Greetings from Syncfusion. 

 

We have analyzed your query how to choose a multiple chip from Xamarin.Forms SfChipGroup. You can achieve this programmatically selecting the chips by using the SelectedItems property. 

 

To achieve this, populate the desired list and predefined selected items from the view model class as shown in below code snippet 

 

XAML: 

  <buttons:SfChipGroup  

                Type="Filter"                  

                ItemsSource="{Binding Languages}" 

                SelectedChipBackgroundColor="Red" 

                ChipPadding="8,8,0,0" 

                SelectionIndicatorColor="White" 

                SelectedItems="{Binding SelectedItems}" 

                DisplayMemberPath="Name"> 

  </buttons:SfChipGroup> 

 

 

C#: 

public class ViewModel : INotifyPropertyChanged 

{ 

        private ObservableCollection<Langugae> languages; 

        private ObservableCollection<Langugae> selectedItems; 

        public ObservableCollection<Langugae> Languages 

        { 

            get 

            { 

                return languages; 

            } 

 

            set 

            { 

                languages = value; 

                OnPropertyChanged("Languages"); 

            } 

        } 

 

        public ObservableCollection<Langugae> SelectedItems 

        { 

            get 

            { 

                return selectedItems; 

            } 

 

            set 

 

            { 

                selectedItems = value; 

                OnPropertyChanged("SelectedItems"); 

            } 

        } 

 

        public ViewModel() 

        { 

            Languages = new ObservableCollection<Langugae>(); 

            Languages.Add(new Langugae() { Name = "C#" }); 

            Languages.Add(new Langugae() { Name = "HTML" }); 

            Languages.Add(new Langugae() { Name = "Java" }); 

            Languages.Add(new Langugae() { Name = "JS" }); 

            selectedItems = new ObservableCollection<Langugae>() { Languages[0], Languages[1] }; 

        } 

       … 

 

    } 

 

 

Sample: https://github.com/SyncfusionExamples/Multiple-selection-in-chipgroup 

 

Please let us know if you need any further assistance. 

 

Regards, 

Devakumar D 

[Daniel Christopher Eclipse]

Thanks for the answer!

I have to make my ObservableCollection into a collection of type of object (Model) like in your sample and now it works as expected.

[Devakumar Dhanapoosanam]

Hi Daniel Christopher Eclipse, 

 

Thanks for your update. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Devakumar D