Loading Data from WCF Services

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

• A straight-forward way - plain method calls.

• Using 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 add a RadGridView declaration in your XAML:

<telerik:RadGridView /> 

Plain Method Calls

• Add a reference to your WCF Service.

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

WcfServiceClient serviceClient = new WcfServiceClient(); 

Private serviceClient As New WcfServiceClient() 

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 gridview control will be populated with all Customers from the Northwind database. Add the following code which will make the initial load of the objects.

private void BeginRequest() 
{ 
    serviceClient.LoadCustomersCompleted += new EventHandler<LoadCustomersCompletedEventArgs>(serviceClient_LoadCustomersCompleted); 
    serviceClient.LoadCustomersAsync(); 
} 
 
private void serviceClient_LoadCustomersCompleted(object sender, LoadCustomersCompletedEventArgs e) 
{ 
    var customers = e.Result; 
    this.radGridView.ItemsSource = customers; 
} 

Private Sub BeginRequest() 
    AddHandler serviceClient.LoadCustomersCompleted, AddressOf serviceClient_LoadCustomersCompleted 
    serviceClient.LoadCustomersAsync() 
End Sub 
 
Private Sub serviceClient_LoadCustomersCompleted(ByVal sender As Object, ByVal e As LoadCustomersCompletedEventArgs) 
    Dim customers = e.Result 
    Me.radGridView.ItemsSource = customers 
End Sub 

this.radGridView.ItemsSource = serviceClient.LoadCustomers(); 

Me.radGridView.ItemsSource = serviceClient.LoadCustomers() 

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

Using MVVM Approach

This section will show you how to populate your RadGridView control in a MVVM manner. The RadGridView will be bound to a data source object, that has a property Customers. When the control is loaded all customers from the Customers 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 Customers.

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

public class NorthwindDataSource 
{ 
    private SampleWcfServiceClient serviceClient; 
    public NorthwindDataSource() 
    { 
        serviceClient = new SampleWcfServiceClient(); 
        this.Customers = new ObservableCollection<Customer>(); 
    } 
    public ObservableCollection<Customer> Customers 
    { 
        get; 
        set; 
    } 
} 

Public Class NorthwindDataSource 
    Private serviceClient As SampleWcfServiceClient 
    Public Sub New() 
        serviceClient = New SampleWcfServiceClient() 
        Me.Customers = New ObservableCollection(Of Customer)() 
    End Sub 
    Public Property Customers() As ObservableCollection(Of Customer) 
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 Customers from the database:

serviceClient.LoadCustomersCompleted += new EventHandler<LoadCustomersCompletedEventArgs>(serviceClient_LoadCustomersCompleted); 
serviceClient.LoadCustomersAsync(); 

foreach (Customer c in serviceClient.LoadCustomers()) 
{ 
    this.Customers.Add(c); 
} 

For Each c As Customer In serviceClient.LoadCustomers() 
    Me.Customers.Add(c) 
Next c 

AddHandler serviceClient.LoadCustomersCompleted, AddressOf serviceClient_LoadCustomersCompleted 
serviceClient.LoadCustomersAsync() 

if (e.Error == null && e.Result != null) 
{ 
    foreach (Customer c in e.Result) 
    { 
        this.Customers.Add(c); 
    } 
} 

If e.Error Is Nothing AndAlso e.Result IsNot Nothing Then 
    For Each c As Customer In e.Result 
        Me.Customers.Add(c) 
    Next c 
End If 

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

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

• Update your RadGridView declaration - set the ItemsSource property.

<telerik:RadGridView ItemsSource="{Binding Source={StaticResource DataSource}, Path=Customers}"/> 

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

If you need to define the columns manually take a look at the Defining Columns topic.

See Also

• Using in-memory Data

• Loading Data from XML

• Loading Data from ADO.NET Services