We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load tokens on control loading

Platform: Xamarin.Forms |
Control: SfAutoComplete

Auto complete provides support for selecting multiple items through token representation on control loading.


To load tokens on control loading:


Step 1:   Add the required assemblies to get the view of AutoComplete.

Step 2: Set the MultiSelectMode to Token.

Step 3 : Bind the DataSource property with the SelectedItem in the SfAutoComplete.

Step 4:  In the ViewModel class create two private varaiable of Observable Collections and add the AutoComplete items in the collections.

Step 5: The items added in the collection which are binded in the SelectedItem will be selected item which are shown in token representation while control get loaded.


 Selected items from the suggestion list is viewed in token representation in AutoComplete.


The following code illustrates how to achieve this method.


XAML code to set Custom filter:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:Autocomplete" x:Class="Autocompletesample.AutocompletesamplePage">
  <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <autocomplete:SfAutoComplete WidthRequest="300" x:Name="autoComplete" SuggestionMode="StartsWith" AutoCompleteMode="Suggest"
          TokensWrapMode="Wrap"   DisplayMemberPath="Name"
        DataSource="{Binding SelectedItemCollection}"
        SelectedItem="{Binding SelectedItemCollection1}"/>


Code behind code:

namespace Autocomplete
public partial class Autocompletesample : ContentPage
public Autocompletesample()
autoComplete.BindingContext = new SelectedItemViewModel(); 
public class Item
    private int id;
    public int ID
        get { return id; }
        set { id = value; }
    private string name;
    public string Name
        get { return name; }
        set { name = value; }
public class SelectedItemViewModel
    private ObservableCollection<Item> selecteditemCollection;
    public ObservableCollection<Item> SelectedItemCollection
        get { return selecteditemCollection; }
        set { selecteditemCollection = value; }
    private ObservableCollection<Item> selecteditemCollection1;
    public ObservableCollection<Item> SelectedItemCollection1
        get { return selecteditemCollection1; }
        set { selecteditemCollection1 = value; }
    public SelectedItemViewModel()
        selecteditemCollection = new ObservableCollection<Item>();
        selecteditemCollection.Add(new Item() { ID = 1, Name = " Afghanistan " });
        selecteditemCollection.Add(new Item() { ID = 2, Name = " Akrotiri " });
        selecteditemCollection.Add(new Item() { ID = 3, Name = " Albania " });
        selecteditemCollection.Add(new Item() { ID = 4, Name = " Algeria " });
        selecteditemCollection.Add(new Item() { ID = 5, Name = " America " });
        selecteditemCollection.Add(new Item() { ID = 6, Name = " Albania " });
        selecteditemCollection.Add(new Item() { ID = 7, Name = " Antartica " });
        selecteditemCollection1 = new ObservableCollection<Item>();
        selecteditemCollection1.Add(new Item() { ID = 1, Name = " Afghanistan " });
        selecteditemCollection1.Add(new Item() { ID = 2, Name = " Akrotiri " });



Image after loading token:




Load tokens in SfAutoComplete



2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
Aug 23, 2018

If I try to delete one of the selected items such pressing on the delete button of Afghanistan from this example, I get this error in android but not in iOS

Unhandled Exception: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index occurred.


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile