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-behindUsing MVVM approach

This tutorial will use the Northwind database, which can be downloaded from here.

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

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

Using Plain Methods Call in the Code-Behind

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

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

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.

  • The ComboBox 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.

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 

this.radComboBox.ItemsSource = dbContext.Products.Execute(); 
Me.radComboBox.ItemsSource = dbContext.Products.Execute() 
  • 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.

<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> 

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

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

Run your demo, the result can be seen on the next image:

Using MVVM Approach

This section will show you how to populate your RadComboBox control in a MVVM manner. The RadComboBox 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.

  • Create a new class named NorthwindDataSource.

public class NorthwindDataSource 
{ 
} 
Public Class NorthwindDataSource 
End Class 
  • Add a reference to your ADO.NET Data Service.

  • In the NorthwindDataSource class add a reference to an ObservableCollection of Products.

  • In the NorthwindDataSource class add a reference to the NorthwindEntities object:

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 
  • Add the following code in the constructor of the NorthwindDataSource. It will make the initial load of all Products from the database:

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) 

And here is the code for the EntitiesLoaded method:

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 

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 
  • Declare the NorthwindDataSource object as a resource in your application.

<UserControl.Resources> 
    <example:NorthwindDataSource x:Key="DataSource"/>    
</UserControl.Resources> 
  • 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.

<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> 
  • Update your RadComboBox declaration - set the ItemsSource and ItemTemplate properties.

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

Run your demo, the result can be seen on the snapshot below:

See Also

In this article
Not finding the help you need? Improve this article