New to Telerik UI for Xamarin? Download free 30-day trial

Data Binding

For all cases where the business items are not simple strings data-binding is necessary in order to correctly visualize information. The RadAutoCompleteView 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.
  • ImagePath (string): Defines the name of the property holding a path to an image. This property is optional.

The TextSearchPath property is required in data-binding scenarios.

The RadAutoCompleteView 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.


Here is an example how the RadAutoCompleteView Data Binding works:

First, create the needed business objects, for example type Client with the following properties:

public class Client
    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; }

Then create a ViewModel with a collection of Client objects:

public class ViewModel
    public ObservableCollection<Client> Source { get; set; }
    public ViewModel()
        this.Source = new ObservableCollection<Client>()
            new Client("Freda Curtis", "", "available32.png"),
            new Client("Jeffery Francis", "", "away32.png"),
            new Client("Eva Lawson", "", "available32.png"),
            new Client("Emmett Santos", "", "busy32.png"),
            new Client("Theresa Bryan", "", "available32.png"),
            new Client("Jenny Fuller", "", "busy32.png"),
            new Client("Terrell Norris", "", "away32.png"),
            new Client("Eric Wheeler", "", "away32.png"),
            new Client("Nida Carty", "", "away32.png"),
            new Client("Niki Samaniego", "", "busy32.png")

Finally, use the following snippet to declare a RadAutoCompleteView in XAML:

<telerikInput:RadAutoCompleteView x:Name="autoCompleteView"
                                  ItemsSource="{Binding Source}"
                                  Watermark="Show Suggestions on focus"/>

Where the telerikInput namespace is the following:


A sample Data Binding example can be found in the AutoCompleteView/Features folder of the SDK Samples Browser application.

See Also

In this article