)
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. (Last updated on: June 24, 2019).
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 |
Published Date: February 28, 2018 |
Last Revised Date: June 24, 2019

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:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:autocomplete="clr-namespace:Syncfusion.SfAutoComplete.XForms;assembly=Syncfusion.SfAutoComplete.XForms"
xmlns:local="clr-namespace:Autocomplete" x:Class="Autocompletesample.AutocompletesamplePage">
<ContentPage.Content>
  <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <autocomplete:SfAutoComplete WidthRequest="300" x:Name="autoComplete" SuggestionMode="StartsWith" AutoCompleteMode="Suggest"
          TokensWrapMode="Wrap"   DisplayMemberPath="Name"
        MultiSelectMode="Token"
        DataSource="{Binding SelectedItemCollection}"
        SelectedItem="{Binding SelectedItemCollection1}"/>
    />
  </StackLayout>
</ContentPage.Content>
</ContentPage>

 

Code behind code:

namespace Autocomplete
{
public partial class Autocompletesample : ContentPage
{
public Autocompletesample()
{
    InitializeComponent();
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.
ADD COMMENT
You must log in to leave a comment
Comments
Chibuta
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.

Reply

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
Live Chat Icon