Loading Data from Web Services

The purpose of this tutorial is to show you how to populate a RadGridView with data from a Web (asmx) 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 add a RadGridView declaration in your XAML:

<telerik:RadGridView /> 

Plain Method Calls

  • Add a reference to your Web Service.
  • Switch to the code-behind and create a new instance of your Web Service Soap client.

SampleWebServiceSoapClient serviceClient = new SampleWebServiceSoapClient(); 
Private serviceClient As New SampleWebServiceSoapClient() 

For more information about how to add a reference to a Web Service and how to create a new instance of a Web Service client, take a look at the Consuming Web ServiceConsuming Web 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:

Telerik Silverlight DataGrid PopulatingWithDataLoadFromWeb 010

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

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

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

public class NorthwindDataSource 
{ 
    private SampleWebServiceSoapClient serviceClient; 
    public NorthwindDataSource() 
    { 
        serviceClient = new SampleWebServiceSoapClient(); 
        this.Customers = new ObservableCollection<Customer>(); 
    } 
    public ObservableCollection<Customer> Customers 
    { 
        get; 
        set; 
    } 
} 
Public Class NorthwindDataSource 
    Private serviceClient As SampleWebServiceSoapClient 
    Public Sub New() 
        serviceClient = New SampleWebServiceSoapClient() 
        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 Web Service and how to create a new instance of a Web Service client, take a look at the Consuming Web ServiceConsuming Web 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 
AddHandler serviceClient.LoadCustomersCompleted, AddressOf serviceClient_LoadCustomersCompleted 
serviceClient.LoadCustomersAsync() 

And here is the code handling the LoadCustomersCompleted event:

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:

Telerik Silverlight DataGrid PopulatingWithDataLoadFromWeb 010

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

See Also

In this article