How to load tokens on control loading
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:
|
