[Solved] AutoComplete get selected Items In ViewModel

[Google]

How to get Selected Items for xamain form for telerik in radautocomplete.

[Yana]

Hello,

You could get the selected items of RadAutoComplete through the Tokens collection. Additionally, you could use SuggestionItemSelected event which is fired as soon as new item from the suggestions list is selected.

Hope this will be helpful.

Regards,
Yana
Progress Telerik

[Neil N]

Old topic but I'm trying to understand the answer for MAUI. The question is asking how to get selected items in the viewmodel, not code behind.  This doesn't seem to work:

XAML:

                            <telerik:RadAutoComplete
                                CompletionMode="Contains"
                                DisplayMode="Tokens"
                                FontSize="15"
                                ItemsSource="{Binding FilteredSkills}"
                                Tokens="{Binding SelectedSkills, Mode=TwoWay}"
                                NoResultsMessage="No matching skill found for the sector chosen. Please choose again."
                                Placeholder="Start typing skills here"
                                SuggestMode="Suggest"
                                SuggestionViewHeight="150"
                                TextColor="Black"
                                TextSearchPath="SkillName" />

VM:

        [ObservableProperty] private ObservableCollection<SkillDTO> _selectedSkills = [];

[Didi]

Hi Neil,

The tokens collection is a read-only collection, so you cannot use two way binding. 

Here is an approach for MAUI AutoComplete control:

xaml definition:

    <VerticalStackLayout>
        <telerik:RadAutoComplete x:Name="autoCompleteView"
                                        ItemsSource="{Binding Source}"
                                        TextSearchPath="Name" 
                                 Tokens="{Binding SelectedTokens, Mode=OneWayToSource}"
                                        DisplayMode="Tokens"/>

        <Label Text="{Binding SelectedTokens.Count}" />
    </VerticalStackLayout>

and ViewModel with SelectedTokens property and CollectionChanged event:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new ViewModel();
    }
}
public class ViewModel : NotifyPropertyChangedBase
{
    private ObservableCollection<object> selection;

    public ViewModel()
    {
        this.Source = new ObservableCollection<Customer>()
            {
                new Customer("Freda Curtis", "[e-mail]"),
                new Customer("Jeffery Francis", "[e-mail]"),
                new Customer("Eva Lawson", "[e-mail]"),
                new Customer("Emmett Santos", "[e-mail]"),
                new Customer("Theresa Bryan", "[e-mail]"),
                new Customer("Jenny Fuller", "[e-mail]"),
                new Customer("Terrell Norris", "[e-mail]"),
            };

    }

    public ObservableCollection<Customer> Source { get; set; }

    public ObservableCollection<object> SelectedTokens {
        get => this.selection;
        set
        {
            if (this.selection != value)
            {
                if (this.selection != null)
                {
                    this.selection.CollectionChanged -= SelectedItems_CollectionChanged;
                }

                this.selection = value;
                Device.StartTimer(TimeSpan.FromMicroseconds(300), () =>
                {
                    this.selection.Add(this.Source[0]);
                    return false;
                });

                this.OnPropertyChanged();

                if (this.selection != null)
                {
                    this.selection.CollectionChanged += SelectedItems_CollectionChanged;
                }
            }
        }
    }
    private void SelectedItems_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == NotifyCollectionChangedAction.Add)
        {
            // add your logic here
        }
        else if (e.Action == NotifyCollectionChangedAction.Remove)
        {
            // add your logic here
        }
    }
}
public class Customer
{
    public Customer(string name, string email)
    {
        this.Name = name;
        this.Email = email;
    }
    public string Name { get; set; }
    public string Email { get; set; }
}

Hope this will be of help. In the xaml I have added a label and bind the text to the SelectedTokens.Count, so you can check the items count updates as expected.

 

[Neil N]

Thank you. Got this working with a couple tweaks.