Binding to WCF Service

The purpose of this tutorial is to show you how to populate a RadComboBox with a data from a WCF Service in two ways:

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

  • Switch to the code-behind and create a new instance of your WCF Service client.

ComboBoxWcfServiceClient serviceClient = new ComboBoxWcfServiceClient(); 
Dim serviceClient As New ComboBoxWcfServiceClient() 

For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF 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() 
{ 
    serviceClient.GetProductsCompleted += new EventHandler<GetProductsCompletedEventArgs>( serviceClient_GetProductsCompleted ); 
    serviceClient.GetProductsAsync(); 
} 
private void serviceClient_GetProductsCompleted( object sender, GetProductsCompletedEventArgs e ) 
{ 
    radComboBox.ItemsSource = e.Result; 
} 
Private Sub BeginRequest() 
    AddHandler serviceClient.GetProductsCompleted, AddressOf serviceClient_GetProductsCompleted 
    serviceClient.GetProductsAsync() 
End Sub 
Private Sub serviceClient_GetProductsCompleted(ByVal sender As Object, ByVal e As GetProductsCompletedEventArgs) 
    radComboBox.ItemsSource = e.Result 
End Sub 

private void BeginRequest() 
{ 
    this.radComboBox.ItemsSource = serviceClient.GetProducts(); 
} 
Private Sub BeginRequest() 
    Me.radComboBox.ItemsSource = serviceClient.GetProducts() 
End Sub 
  • 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 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 WCF Service

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

  • In the NorthwindDataSource class add a reference to your WCF Service client:

public class NorthwindDataSource 
{ 
    private ComboBoxWcfServiceClient serviceClient; 
 
    public NorthwindDataSource() 
    { 
        this.Products = new ObservableCollection<Products>(); 
        this.serviceClient = new ComboBoxWcfServiceClient(); 
    } 
 
    public ObservableCollection<Products> Products 
    { 
        get; 
        protected set; 
    } 
} 
Public Class NorthwindDataSource 
    Private serviceClient As ComboBoxWcfServiceClient 
 
    Public Sub New() 
        Me.Products = New ObservableCollection(Of Products)() 
        Me.serviceClient = New ComboBoxWcfServiceClient() 
    End Sub 
 
Private _Products As ObservableCollection(Of Products) 
    Public Property Products() As ObservableCollection(Of Products) 
        Get 
            Return _Products 
        End Get 
        Protected Set(ByVal value As ObservableCollection(Of Products)) 
            _Products = value 
        End Set 
    End Property 
End Class 

For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF Service topic.

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

this.serviceClient.GetProductsCompleted += new EventHandler<GetProductsCompletedEventArgs>( serviceClient_GetProductsCompleted ); 
this.serviceClient.GetProductsAsync(); 
AddHandler Me.serviceClient.GetProductsCompleted, AddressOf serviceClient_GetProductsCompleted 
Me.serviceClient.GetProductsAsync() 

private void serviceClient_GetProductsCompleted( object sender, GetProductsCompletedEventArgs e ) 
{ 
    foreach ( Products p in e.Result ) 
    { 
        this.Products.Add( p ); 
    } 
} 
Private Sub serviceClient_GetProductsCompleted(ByVal sender As Object, ByVal e As GetProductsCompletedEventArgs) 
    For Each p As Products In e.Result 
        Me.Products.Add(p) 
    Next 
End Sub 

foreach ( Products p in serviceClient.GetProducts() ) 
{ 
    this.Products.Add( p ); 
} 
For Each p As Products In serviceClient.GetProducts() 
    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