Binding To Object

To bind RadAutoCompleteBox to a collection of business object, you should use its ItemsSource property.

The following example will guide you through the process of binding your RadAutoCompleteBox to a collection of business objects. The example includes:

• Binding the ItemsSource

• Using DisplayMemberPath and TextSearchPath

Before proceeding with this tutorial you should get familiar with the Data Binding support of the RadAutoCompleteBox control.

Binding the ItemsSource

1. First you will need to add RadAutoCompleteBox to your project:

   Add RadAutoCompleteBox

       <telerik:RadAutoCompleteBox /> 
   

2. Create a business object called Country:

   Creation of the object

       public class Country 
       { 
           public string Name { get; set; } 
           public string Capital { get; set; } 
       } 
   

3. Create a new class named ViewModel. In fact, this will be the data source for the RadAutoCompleteBox and this class has only one purpose - to initialize a collection with sample data.

   ViewModel creation

       public class ViewModel 
       { 
           public ObservableCollection<Country> Countries { get; set; } 
           public ViewModel() 
           { 
               this.Countries = new ObservableCollection<Country>() 
               { 
                   new Country() { Name = "Australia", Capital = "Canberra" }, 
                   new Country() { Name = "Bulgaria", Capital = "Sofia" }, 
                   new Country() { Name = "Canada", Capital = "Ottawa" }, 
                   new Country() { Name = "Denmark", Capital = "Copenhagen" }, 
                   new Country() { Name = "France", Capital = "Paris" }, 
                   new Country() { Name = "Germany", Capital = "Berlin" }, 
                   new Country() { Name = "India", Capital = "New Delhi" }, 
                   new Country() { Name = "Italy", Capital = "Rome" }, 
                   new Country() { Name = "Norway", Capital = "Oslo" }, 
                   new Country() { Name = "Russia", Capital = "Moscow" }, 
                   new Country() { Name = "Spain ", Capital = "Madrid" }, 
                   new Country() { Name = "United Kingdom", Capital = "London" }, 
                   new Country() { Name = "United States", Capital = "Washington, D.C." }, 
               }; 
           } 
       } 
   

4. Declare the ViewModel as a resource in your XAML:

   Declaring the ViewModel

       <UserControl.Resources> 
           <local:ViewModel x:Key="ViewModel"/> 
       </UserControl.Resources> 
   

5. Update your RadAutoCompleteBox declaration and its ItemsSource property:

   Update the ItemsSource property

       <telerik:RadAutoCompleteBox ItemsSource="{Binding Countries, Source={StaticResource ViewModel}}"/> 
   

6. Set the DisplayMemberPath property of the control.

   Setting the DisplayMemberPath

       <telerik:RadAutoCompleteBox ItemsSource="{Binding Countries, Source={StaticResource ViewModel}}" 
                                   DisplayMemberPath="Name"/> 
   

The next screenshots show the final result:

Using DisplayMemberPath and TextSearchPath

Setting both DisplayMemberPath and TextSearchPath properties will allow to search by specific property of the business object and at the same time display a different property in the DropDown and in the TextBox after selection.

In the next code snippets we will demonstrate how to use these properties together by extending the previous example from the Binding the ItemsSource section:

1. Set the DisplayMemberPath to a specific property of the used business object:

   Setting the DisplayMemberPath

       <telerik:RadAutoCompleteBox ItemsSource="{Binding Countries, Source={StaticResource ViewModel}}" 
                                   DisplayMemberPath="Name"/> 
   

2. Set the TextSearchPath to a specific property of the used business object:

   Setting the TextSearchPath

       <telerik:RadAutoCompleteBox ItemsSource="{Binding Countries, Source={StaticResource ViewModel}}" 
                                   DisplayMemberPath="Name" 
                                   TextSearchPath="Capital"/> 
   

The next screenshots show how RadAutoCompleteBox behaves when its DisplayMemberPath and TextSearchPath properties are set: