Binding to ADO.NET Data Service

The purpose of this tutorial is to show you how to populate a RadComboBox with data from an ADO.NET Data Service in two ways:

• Using plain methods call in the code-behind
• Using MVVM approach

This tutorial uses the Northwind database.

Before proceeding further with this tutorial you need to create a new application and a RadComboBox declaration in your XAML.

• XAML

<telerik:RadComboBox x:Name="radComboBox"/> 

Using Plain Methods Call in the Code-Behind

1. Add a reference to your ADO.NET Data Service.

2. Switch to the code-behind and add a reference to the NorthwindEntities object.

   • C#
   • VB.NET

       NorthwindEntities dbContext = new NorthwindEntities( new Uri( "Enter your service address here") ); 

       Dim dbContext As New NorthwindEntities(New Uri("Enter your service address here")) 

   For more information about how to add a reference to an ADO.NET Data Service and how to create a new instance of the exposed entity, take a look at the Consuming ADO.NET Data Service topic.

3. The ComboBoxs control will be populated with all Products from the Northwind database. In the drop-down list the ProductName and the UnitPrice properties will be displayed. Add the following code which will make the initial load of the objects.

   • C#
   • VB.NET

       private void BeginRequest() 
       { 
           DataServiceQuery<Products> query = dbContext.CreateQuery<Products>( "Products" ); 
           query.BeginExecute( RequestCompleted, query ); 
       } 
    
       private void RequestCompleted( IAsyncResult asyncResult ) 
       { 
           DataServiceQuery<Products> query = asyncResult.AsyncState as DataServiceQuery<Products>; 
           var products = query.EndExecute( asyncResult ).ToList(); 
           this.radComboBox.ItemsSource = products; 
       } 

       Private Sub BeginRequest() 
           Dim query As DataServiceQuery(Of Products) = dbContext.CreateQuery(Of Products)("Products") 
           query.BeginExecute(RequestCompleted, query) 
       End Sub 
    
       Private Sub RequestCompleted(ByVal asyncResult As IAsyncResult) 
           Dim query As DataServiceQuery(Of Products) = TryCast(asyncResult.AsyncState, DataServiceQuery(Of Products)) 
           Dim products = query.EndExecute(asyncResult).ToList() 
           Me.radComboBox.ItemsSource = products 
       End Sub 

   • C#
   • VB.NET

       this.radComboBox.ItemsSource = dbContext.Products.Execute(); 

       Me.radComboBox.ItemsSource = dbContext.Products.Execute() 

4. You need to declare a custom DataTemplate to determine how the items in the drop-down will look like. Add the following DataTemplate declaration in your XAML resources.

   • XAML

       <UserControl.Resources> 
           <DataTemplate x:Key="CustomItemTemplate"> 
               <StackPanel Orientation="Horizontal"> 
                   <TextBlock Text="{Binding ProductName}"/> 
                   <TextBlock Text=" - "/> 
                   <TextBlock Text="{Binding UnitPrice}"/> 
                   <TextBlock Text=" $"/> 
               </StackPanel> 
           </DataTemplate> 
       </UserControl.Resources> 

5. Find your RadComboBox declaration and set the just declared DataTemplate to its ItemTemplate property.

   • XAML

       <telerik:RadComboBox x:Name="radComboBox" ItemTemplate="{StaticResource CustomItemTemplate}"/> 

The end result with the data fetched from the service

Using MVVM Approach

This section will show you how to populate your RadComboBox control in a MVVM manner. The ComboBox will be bound to a data source object, that has a property Products. When the control is loaded all products from the Products table in the Northwind database are loaded asynchronously.

1. Create a new class named NorthwindDataSource.

   • C#
   • VB.NET

       public class NorthwindDataSource 
       { 
       } 

       Public Class NorthwindDataSource 
       End Class 

2. Add a reference to your ADO.NET Data Service.

3. In the NorthwindDataSource class add a reference to an ObservableCollection of Product.

4. In the NorthwindDataSource class add a reference to the NorthwindEntities object:

   • C#
   • VB.NET

       public class NorthwindDataSource 
       { 
           private static NorthwindEntities northwindEntity; 
    
           public NorthwindDataSource() 
           { 
               northwindEntity = new NorthwindEntities( new Uri( "Enter your service address here") ); 
               this.Products = new ObservableCollection<Products>(); 
           } 
    
           public ObservableCollection<Products> Products 
           { 
               get; 
               set; 
           } 
       } 

       Public Class NorthwindDataSource 
           Private Shared northwindEntity As NorthwindEntities 
    
           Public Sub New() 
               northwindEntity = New NorthwindEntities(New Uri("Enter your service address here")) 
               Me.Products = New ObservableCollection(Of Products)() 
           End Sub 
    
       Private _Products As ObservableCollection(Of Products) 
           Public Property Products() As ObservableCollection(Of Products) 
               Get 
                   Return _Products 
               End Get 
               Set(ByVal value As ObservableCollection(Of Products)) 
                   _Products = value 
               End Set 
           End Property 
       End Class 

5. Add the following code in the constructor of the NorthwindDataSource. It will make the initial load of all Products from the database:

   • C#
   • VB.NET

       northwindEntity.Products.BeginExecute( 
          ( IAsyncResult result ) => EntitiesLoaded<Products>( result, this.Products ), 
          northwindEntity.Products ); 

       northwindEntity.Products.BeginExecute(Function(ByVal result As IAsyncResult) EntitiesLoaded(Of Products)(result, Me.Products), northwindEntity.Products) 

   • C#
   • VB.NET

       private static void EntitiesLoaded<T>( IAsyncResult result, Collection<T> entities ) 
       { 
          DataServiceQuery<T> query = result.AsyncState as DataServiceQuery<T>; 
          foreach ( T entity in query.EndExecute( result ) ) 
          { 
              entities.Add( entity ); 
          } 
       } 

       Private Shared Sub EntitiesLoaded(Of T)(ByVal result As IAsyncResult, ByVal entities As Collection(Of T)) 
           Dim query As DataServiceQuery(Of T) = TryCast(result.AsyncState, DataServiceQuery(Of T)) 
           For Each entity As T In query.EndExecute(result) 
               entities.Add(entity) 
           Next 
       End Sub 

   • C#
   • VB.NET

       foreach ( Products p in northwindEntity.Products.Execute() ) 
       { 
           this.Products.Add( p ); 
       } 

       For Each p As Products In northwindEntity.Products.Execute() 
           Me.Products.Add(p) 
       Next 

6. Declare the NorthwindDataSource object as a resource in your application.

   • XAML

       <UserControl.Resources> 
           <example:NorthwindDataSource x:Key="DataSource"/>    
       </UserControl.Resources> 

7. Declare a custom DataTemplate to determine how the items in the drop-down will look like.

   • XAML

       <UserControl.Resources> 
           <DataTemplate x:Key="CustomItemTemplate"> 
               <StackPanel Orientation="Horizontal"> 
                   <TextBlock Text="{Binding ProductName}"/> 
                   <TextBlock Text=" - "/> 
                   <TextBlock Text="{Binding UnitPrice}"/> 
                   <TextBlock Text=" $"/> 
               </StackPanel> 
           </DataTemplate> 
    
           <example:NorthwindDataSource x:Key="DataSource"/> 
       </UserControl.Resources> 

8. Update your RadComboBox declaration - set the ItemsSource and ItemTemplate properties.

   • XAML

       <telerik:RadComboBox x:Name="radComboBox" 
           ItemsSource="{Binding Source={StaticResource DataSource}, Path=Products}" 
           ItemTemplate="{StaticResource CustomItemTemplate}"/> 

The end result with the data fetched from the service