New to Telerik UI for .NET MAUI? Start a free 30-day trial

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.


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", "", "available.png"),
            new Client("Jeffery Francis", "", "away.png"),
            new Client("Eva Lawson", "", "available.png"),
            new Client("Emmett Santos", "", "busy.png"),
            new Client("Theresa Bryan", "", "available.png"),
            new Client("Jenny Fuller", "", "busy.png"),
            new Client("Terrell Norris", "", "away.png"),
            new Client("Eric Wheeler", "", "away.png"),
            new Client("Nida Carty", "", "away.png"),
            new Client("Niki Samaniego", "", "busy.png")

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

3. The following snippet shows the SuggestionItemTemplate:

<telerik:RadAutoComplete x:Name="autoComplete"
                         ItemsSource="{Binding Source}"
                         Placeholder="Search here...">
            <Grid ColumnDefinitions="Auto,Auto">
                <telerik:RadBorder Margin="5"
                <Label Margin="5" 
                       Text="{Binding Name}"

Here is the result:

.NET MAUI AutoComplete SuggestionItemTemplate Example

For AutoComplete SuggestionItemTemplate example refer to the SDKBrowser Demo application.

See Also

In this article