Edit this page

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.

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.

C#

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

VB.NET

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.

C#

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

VB.NET

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#

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

VB.NET

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.

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>

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

XAML

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

C#

public class NorthwindDataSource
{
}

VB.NET

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:

C#

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

VB.NET

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:

C#

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

VB.NET

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

C#

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 );
   }
}

VB.NET

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#

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

VB.NET

For Each p As Products In northwindEntity.Products.Execute()
    Me.Products.Add(p)
Next
  • Declare the NorthwindDataSource object as a resource in your application.

XAML

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

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>
  • 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}"/>

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

See Also