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

.NET MAUI AutoComplete Data Binding

For all cases where the business items are not simple strings data-binding is necessary in order to correctly visualize information. The AutoComplete for .NET MAUI component supports data binding in the form of path properties.

  • TextSearchPath(string`)—Defines the name of the property the search function will be executed against.

The TextSearchPath property is required in data-binding scenarios.

The AutoComplete component provides a default template for suggestion items that cannot be modified. You can use a custom template if you need to customize the suggestion items.

Example

Here is an example how the RadAutoComplete Data Binding works:

1. Create the needed business objects, for example type Client 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. Ceate a ViewModel with a collection of Client objects:

public class ClientsViewModel
{
    public ClientsViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "fcurtis@mail.com", "available.png"),
            new Client("Jeffery Francis", "jfrancis@mail.com", "away.png"),
            new Client("Eva Lawson", "elawson@mail.com", "available.png"),
            new Client("Emmett Santos", "esantos@mail.com", "busy.png"),
            new Client("Theresa Bryan", "tbryan@mail.com", "available.png"),
            new Client("Jenny Fuller", "jfuller@mail.com", "busy.png"),
            new Client("Terrell Norris", "tnorris@mail.com", "away.png"),
            new Client("Eric Wheeler", "ewheeler@mail.com", "away.png"),
            new Client("Nida Carty", "ncarty@mail.com", "away.png"),
            new Client("Niki Samaniego", "nsamaniego@mail.com", "busy.png")
        };
    }

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

3. Use the following snippet to declare a RadAutoComplete in XAML:

<telerik:RadAutoComplete x:Name="autoComplete"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Show Suggestions on focus">
    <telerik:RadAutoComplete.BindingContext>
        <local:ClientsViewModel/>
    </telerik:RadAutoComplete.BindingContext>
</telerik:RadAutoComplete>

For AutoComplete Data Binding example refer to the SDKBrowser Demo application.

See Also

In this article
Not finding the help you need?