Creating the Data-bound Controls
Now that we are ready with the service reference and the DataServiceContext, let's configure RadDataServiceDataSource, RadGridView and RadDataPager.
1. Add references to the following Telerik assemblies:
Telerik.Windows.Controls (core assembly)
Telerik.Windows.Data (core assembly)
Telerik.Windows.Controls.DataServices (RadDataServiceDataSource)
Telerik.Windows.Controls.GridView (RadGridView)
Telerik.Windows.Controls.Input (required by RadGridView)
Telerik.Windows.Controls.Data (RadDataPager)
2. Now add the RadDataServiceDataSource, RadGridView and RadDataPager controls to the MainWindow. You can add them by dragging them from the Toolbox and dropping it over the XAML or do it manually by writing the XAML code that is shown below:
<Window x:Class="NorthwindExplorer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:NorthwindExplorer"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<telerik:RadDataServiceDataSource Name="customersDataSource" QueryName="Customers" AutoLoad="True">
<telerik:RadDataServiceDataSource.DataServiceContext>
<local:MyNorthwindContext/>
</telerik:RadDataServiceDataSource.DataServiceContext>
</telerik:RadDataServiceDataSource>
<telerik:RadGridView Grid.Row="0" ItemsSource="{Binding DataView, ElementName=customersDataSource}" IsBusy="{Binding IsBusy, ElementName=customersDataSource}" ShowGroupPanel="False"/>
<telerik:RadDataPager Grid.Row="1" Source="{Binding DataView, ElementName=customersDataSource}" PageSize="10"/>
</Grid>
</Window>
There are several important things to notice here:
The import of the Telerik schema: xmlns:telerik=http://schemas.telerik.com/2008/xaml/presentation"
The import of the local namespace: xmlns:local="clr-namespace:NorthwindExplorer"
The AutoLoad property of RadDataServiceDataSource instructs it to load data automatically the very first time and then each time something that affects the query changes.
The QueryName specifies the name of the property on the DataServiceContext class that contains the entities that we will load. If you open the hidden Reference file which is located below the Northwind Service Reference, then locate the NorthwindEntities class inside it, you can see all queries that it offers, such as Orders, Customers and so on. All of these queries are of type DataServiceQuery<T>.
DataServiceContext– this is the MyNorthwindContext class that we created earlier. It derives from the NorthwindEntities context which was automatically generated for us. Additionally, it specifies the Uri where the context will fetch data from. Since our class MyNorthwindContext has a parameter less constructor we can easily define it in XAML.
DataView - the data that comes from the server is stored in the DataView property, so we bind RadGridView and RadDataPager to it.
IsBusy [optional] - bind the IsBusy property of RadGridView to the IsBusy property of the RadDataServiceDataSource so you get a loading indicator during the load operation.
3. Click Ctrl + F5 to run the application. After a short pause RadGridView will be populated with data from the public OData service. Use RadDataPager to perform server-side paging. Use RadGridView’s filtering and sorting UI to perform these actions on the server.