RadComboBox binding SelectedItem not work when SelectionMode is Multiple

1 Answer 687 Views
ComboBox
atlanta
Top achievements
Rank 1
atlanta asked on 28 Aug 2022, 02:06 PM | edited on 28 Aug 2022, 02:44 PM

Binding multiple selected to RadComboBox after getting the data not work 

xaml code
 <telerik:RadComboBox ItemsSource="{Binding Skills}"
                                     SelectedItem="{Binding SelectedSkillItems,Mode=TwoWay}"
                                     Placeholder="Select Skills"
                                     MaximumWidthRequest="{OnPlatform WinUI='300', MacCatalyst='300'}"
                                     SelectionMode="Multiple"
                                     IsDropDownClosedOnSelection="False"/>
 

public ObservableCollection<string> Skills { get; set; }

 public ObservableCollection<string> SelectedSkillItems 
        {
            get => selectedSkillItems;
            set =>UpdateValue(ref selectedSkillItems, value);
        }

Skills = new ObservableCollection<string>() { ".NET MAUI", "Xamarin", "Blazor", "WPF", "WinUI", "Fiddler", "Sitefinity", "Test Studio", "Open Edge", "Kinvey", "DataRPM", "Corticon" };


 SelectedSkillItems =new ObservableCollection<string>(new List<string>() { "Xamarin", "WPF" });


Didi
Telerik team
commented on 29 Aug 2022, 10:08 AM

For multiple selection mode use the ComboBox.SelectedItems collection. Example is provided here: https://github.com/telerik/maui-samples/blob/5e0097e9c3410a14fb254d13e2d1c66ad33ceebf/Samples/SdkBrowser/Examples/ComboBoxControl/FeaturesCategory/SelectionExample/Selection.xaml#L39

 The SelectedSkillItems property form the ViewModel must be bound to the Combobox.SelectedItems property, not to the SelectedItem.
atlanta
Top achievements
Rank 1
commented on 30 Aug 2022, 02:56 AM

I've tried it and doesn't work either,beside the ComboBox.SelectedItems property is read-only
atlanta
Top achievements
Rank 1
commented on 31 Aug 2022, 03:10 PM

This work, Thx

1 Answer, 1 is accepted

Sort by
1
Didi
Telerik team
answered on 30 Aug 2022, 07:10 AM

SelectedItems collection of RadComboBox is read-only, so you cannot bind with TwoWay binding to it, you can only get the collection (OneWay binding) and add/remove items.
Here is an example for SelectedItems collection: 

public class ViewModel : NotifyPropertyChangedBase
{
    private int selectedIndex;
    private City selectedItem;
    private ObservableCollection<object> selectedItems;
    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.SelectedIndex = 1;
        this.SelectedItem = this.Items[2];
    }

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

    public ObservableCollection<object> SelectedItems
    {
        get
        {
            return this.selectedItems;
        }
        set
        {
            if (this.selectedItems != value)
            {
                this.selectedItems = value;

                this.selectedItems.Add(this.Items[0]);
                this.selectedItems.Add(this.Items[1]);

                this.OnPropertyChanged();
            }
        }
    }

    public int SelectedIndex
    {
        get
        {
            return this.selectedIndex;
        }
        set
        {
            if (this.selectedIndex != value)
            {
                this.selectedIndex = value;
                OnPropertyChanged();
            }
        }
    }

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

 

<telerik:RadComboBox ItemsSource="{Binding Items}"
                                  SelectionMode="Multiple"
                                  DisplayMemberPath="Name"
                                  SelectedItems="{Binding SelectedItems}">
            <telerik:RadComboBox.BindingContext>
                <local:ViewModel/>
            </telerik:RadComboBox.BindingContext>
        </telerik:RadComboBox>

The Example in the documentation will be updated.

Tags
ComboBox
Asked by
atlanta
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or