DataForm with Custom ComboBox Editor and SelectedItems collection
Environment
Version | Product | Author |
---|---|---|
6.6.0 | Telerik UI for .NET MAUI DataForm | Dobrinka Yordanova |
Description
This article shows how to bind the ComboBox SelectedItems collection in DataForm Custom Editor scenario.
Solution
1. When using the ComboBox SelectedItems
collection you have to set the SelectionMode
to Multiple
.
2. Here is the DataForm definition in XAML with ComboBox set as a custom editor:
<telerik:RadDataForm x:Name="dataForm" CommitMode="Explicit" AutoGenerateItems="False">
<telerik:DataFormCustomEditor PropertyName="Accommodation">
<telerik:DataFormCustomEditor.EditorTemplate>
<ControlTemplate>
<VerticalStackLayout>
<telerik:RadComboBox Text="{Binding Value, Mode=TwoWay, Source={RelativeSource Mode=TemplatedParent}}"
SelectionMode="Multiple"
ItemsSource="{Binding AvailableAccommodations}"
SelectedItems="{Binding Values}"/>
</VerticalStackLayout>
</ControlTemplate>
</telerik:DataFormCustomEditor.EditorTemplate>
</telerik:DataFormCustomEditor>
</telerik:RadDataForm>
3. DataForm needs a binding context. Here is a sample ViewModel implementation. Also the property bound to the SelectedItems - Values
is a property defined in the ViewModel. For Values
, you can subscribe to CollectionChanged
event to listed for changes. For example, when item is added/removed to/from the collection.
public class CustomEditorViewModel : NotifyPropertyChangedBase
{
private string accommodation;
private ObservableCollection<object> selectedItems;
public CustomEditorViewModel()
{
this.AvailableAccommodations = new[]
{
"Single Room",
"Double Room",
"Appartment",
"House",
"new House",
"new apartment",
"my apartment",
"hallo",
};
}
[Required]
public string Accommodation
{
get => this.accommodation;
set => this.UpdateValue(ref this.accommodation, value);
}
[NotMapped]
public IList<string> AvailableAccommodations { get; }
public ObservableCollection<object> Values
{
get
{
return this.selectedItems;
}
set
{
if (this.selectedItems != value)
{
if (this.selectedItems != null)
{
this.selectedItems.CollectionChanged -= SelecteDItems_CollectionChanged;
}
this.selectedItems = value;
this.selectedItems.Add(this.AvailableAccommodations[0]);
this.selectedItems.Add(this.AvailableAccommodations[1]);
if (this.selectedItems != null)
{
this.selectedItems.CollectionChanged += SelecteDItems_CollectionChanged;
}
OnPropertyChanged();
}
}
}
private void SelecteDItems_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
}
else if (e.Action == NotifyCollectionChangedAction.Remove)
{
}
}
}
4. Then set the CustomEditorViewModel
as a BindingContext
to the Page:
this.BindingContext = new CustomEditorViewModel();