Edit this page

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:

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:

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

See Also