Suggestion Items Customization

Whenever the default template does not fit a particular scenario you can use the SuggestionItemTemplate.

• SuggestionItemTemplate(DataTemplate)—Defines the template that will be used to create each of the suggestions.

Example

Here is an example how to use the RadAutoComplete SuggestionItemTemplate:

1. Create the needed business objects, for example type City with the following properties:

public class Client
{
    public Client() { }

    public Client(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }

    public Client(string name, string email, string imageSource)
    {
        this.Name = name;
        this.Email = email;
        this.ImageSource = imageSource;
    }

    public string Name { get; set; }
    public string Email { get; set; }
    public string ImageSource { get; set; }
}

2. Create a ViewModel with a collection of City objects:

public class ClientsViewModel
{
    public ClientsViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "[e-mail]", "available.png"),
            new Client("Jeffery Francis", "[e-mail]", "away.png"),
            new Client("Eva Lawson", "[e-mail]", "available.png"),
            new Client("Emmett Santos", "[e-mail]", "busy.png"),
            new Client("Theresa Bryan", "[e-mail]", "available.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy.png"),
            new Client("Terrell Norris", "[e-mail]", "away.png"),
            new Client("Eric Wheeler", "[e-mail]", "away.png"),
            new Client("Nida Carty", "[e-mail]", "away.png"),
            new Client("Niki Samaniego", "[e-mail]", "busy.png")
        };
    }

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

3. The following snippet shows the SuggestionItemTemplate:

<telerik:RadAutoComplete x:Name="autoComplete"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         VerticalOptions="Start"
                         Placeholder="Search here...">
    <telerik:RadAutoComplete.BindingContext>
        <local:ClientsViewModel/>
    </telerik:RadAutoComplete.BindingContext>
    <telerik:RadAutoComplete.SuggestionItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="Auto,Auto">
                <telerik:RadBorder Margin="5"
                                   CornerRadius="5"
                                   HeightRequest="20"
                                   BackgroundColor="#8660C5"
                                   WidthRequest="20"/>
                <Label Margin="5" 
                       Grid.Column="1"
                       FontSize="18"
                       Text="{Binding Name}"
                       TextColor="Black"/>
            </Grid>
        </DataTemplate>
    </telerik:RadAutoComplete.SuggestionItemTemplate>
</telerik:RadAutoComplete>

Here is the result:

For AutoComplete SuggestionItemTemplate example refer to the SDKBrowser Demo application.

See Also

• Remote Search
• Filtering
• Templates
• Styling