Connect to Web API 2
This article will show you how you can consume the data provided by a Web API 2 service with RadDataServiceDataSource and display it in a RadGridView control. The information in this article has been split in the following sections:
- Set Up the OData Endpoint
- Add a Service Reference
- Use the Service Proxy (Container)
- Display the Consumed Data
Set Up the OData Endpoint
First, you will need to set up an OData Endpoint of your Web API service and set that as the DataServiceContext. Detailed instructions on how to achieve this have been given in this MSDN article.
Add a Service Reference
Once you've set up the service, you can create your client applicaton and add a service reference to your OData service. The process of doing so is also thoroughly explained here.
Use the Service Proxy (Container)
Once you've added the service reference, you can define your service proxy class as shown in Example 1.
Example 1: The Service Proxy Class
public class ODataContext : Container
{
public ODataContext()
: base(new Uri("http://localhost:21900/odata", UriKind.Absolute))
{
}
}
You should replace http://localhost:21900/odata with the address of your Web API service.
Display the Consumed Data
All that's left is to use this class as the DataServiceContext of your RadDataServiceDataSource instance. In addition, Example 2 defines a RadGridView control to display the data returned by RadDataServiceDataSource.
Example 2: Setting the DataServiceContext and displaying the data in a RadGridView
<Grid>
<telerik:RadDataServiceDataSource Name="productsDataSource" QueryName="Products" AutoLoad="True">
<telerik:RadDataServiceDataSource.DataServiceContext>
<local:ODataContext/>
</telerik:RadDataServiceDataSource.DataServiceContext>
</telerik:RadDataServiceDataSource>
<telerik:RadGridView ItemsSource="{Binding DataView, ElementName=productsDataSource}" Deleted="RadGridView_Deleted" RowEditEnded="RadGridView_RowEditEnded"
IsBusy="{Binding IsBusy, ElementName=productsDataSource}" />
</Grid>
Example 3: Submit changes made in the RadGridView control
private void RadGridView_RowEditEnded(object sender, Telerik.Windows.Controls.GridViewRowEditEndedEventArgs e)
{
productsDataSource.SubmitChanges();
}
private void RadGridView_Deleted(object sender, Telerik.Windows.Controls.GridViewDeletedEventArgs e)
{
productsDataSource.SubmitChanges();
}