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.

Example

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", "[e-mail]", "available32.png"),
            new Client("Jeffery Francis", "[e-mail]", "away32.png"),
            new Client("Eva Lawson", "[e-mail]", "available32.png"),
            new Client("Emmett Santos", "[e-mail]", "busy32.png"),
            new Client("Theresa Bryan", "[e-mail]", "available32.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy32.png"),
            new Client("Terrell Norris", "[e-mail]", "away32.png"),
            new Client("Eric Wheeler", "[e-mail]", "away32.png"),
            new Client("Nida Carty", "[e-mail]", "away32.png"),
            new Client("Niki Samaniego", "[e-mail]", "busy32.png")
        };
    }
}

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

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

Where the telerikInput namespace is the following:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

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

See Also

• Tokens Support
• SuggestionItemTemplate