Edit this page

Loading Data from ADO.NET Services

The purpose of this tutorial is to show you how to populate a RadGridView with data from an ADO.NET Data 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 x:Name="radGridView"/>

Plain Method Calls

  • Add a reference to your ADO.NET Data Service.

  • Switch to the code-behind and add a reference to the NorthwindEntities object.

NorthwindEntities dbContext = new NorthwindEntities(new Uri("GridViewDataService.svc", UriKind.Relative));

NorthwindEntities dbContext2 = new NorthwindEntities(new Uri("Enter your service address here"));
Private dbContext2 As New NorthwindEntities(New Uri("Enter your service address here"))
Private dbContext As New NorthwindEntities(New Uri("GridViewDataService.svc", UriKind.Relative))

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 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()
{
    DataServiceQuery<Customer> query = dbContext.CreateQuery<Customer>("Customers");
    query.BeginExecute(RequestCompleted, query);
}

private void RequestCompleted(IAsyncResult asyncResult)
{
    DataServiceQuery<Customer> query = asyncResult.AsyncState as DataServiceQuery<Customer>;
    var customers = query.EndExecute(asyncResult).ToList();
    this.radGridView.ItemsSource = customers;
}
Private Sub BeginRequest()
    Dim query As DataServiceQuery(Of Customer) = dbContext.CreateQuery(Of Customer)("Customers")
    query.BeginExecute(AddressOf RequestCompleted, query)
End Sub

Private Sub RequestCompleted(ByVal asyncResult As IAsyncResult)
    Dim query As DataServiceQuery(Of Customer) = TryCast(asyncResult.AsyncState, DataServiceQuery(Of Customer))
    Dim customers = query.EndExecute(asyncResult).ToList()
    Me.radGridView.ItemsSource = customers
End Sub

this.radGridView.ItemsSource = dbContext.Customers.Execute().ToList();
Me.radGridView.ItemsSource = dbContext.Customers.Execute().ToList()
'

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. 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 ADO.NET Data Service.

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

  • In the NorthwindDataSource class add a reference to the NorthwindEntities object:

public class NorthwindDataSource
{
    private static NorthwindEntities northwindEntity;
    public NorthwindDataSource()
    {
        northwindEntity = new NorthwindEntities(new Uri("GridViewDataService.svc", UriKind.Relative));
        this.Customers = new ObservableCollection<Customer>();
    }
    public ObservableCollection<Customer> Customers
    {
        get;
        set;
    }
}
Public Class NorthwindDataSource
    Private Shared northwindEntity As NorthwindEntities
    Public Sub New()
        northwindEntity = New NorthwindEntities(New Uri("GridViewDataService.svc", UriKind.Relative))
        Me.Customers = New ObservableCollection(Of Customer)()
    End Sub
    Public Property Customers() As ObservableCollection(Of Customer)
End Class

public class NorthwindDataSource
{
    private static NorthwindEntities northwindEntity;
    public NorthwindDataSource()
    {
        northwindEntity = new NorthwindEntities(new Uri("Enter your service address here"));
        this.Customers = new ObservableCollection<Customer>();
    }
    public ObservableCollection<Customer> Customers
    {
        get;
        set;
    }
}
Public Class NorthwindDataSource
    Private Shared northwindEntity As NorthwindEntities
    Public Sub New()
        northwindEntity = New NorthwindEntities(New Uri("Enter your service address here"))
        Me.Customers = New ObservableCollection(Of Customer)()
    End Sub
    Public Property Customers() As ObservableCollection(Of Customer)
End Class
  • Add the following code in the constructor of the NorthwindDataSource. It will make the initial load of all Customers from the database:

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

foreach (Customer c in northwindEntity.Customers.Execute())
{
    this.Customers.Add(c);
}
For Each c As Customer In northwindEntity.Customers.Execute()
    Me.Customers.Add(c)
Next c
northwindEntity.Customers.BeginExecute(Function(result As IAsyncResult) EntitiesLoaded(Of Customer)(result, Me.Customers), northwindEntity.Customers)

And here is the code for the __EntitiesLoaded__method:

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);
    }
}
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 entity
End Sub
  • Declare the NorthwindDataSource object as a resource in your application.

<UserControl.Resources>
    <my: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

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy