Edit this page

Getting Started

This tutorial will walk you through the creation of a sample application that contains RadGridView bound to RadDomainDataSource.

Creating the Silverlight application

  1. Start Visual Studio 2010 and create a new Silverlight Application.

  2. Do not forget to check the Enable WCF Ria Services option:

Creating the Model and the DomainDataService

Now that we have the web application, we will add our data model using the Northwind database.

  1. In the server project (SilverlightApplication2.Web) add a new ADO.NET Entity Data Model and generate the entities from the Customers table of the Northwind database.

  2. Rebuild the project so when we add the DomainDataSource - it will see the generated entities.

  3. In the server project (SilverlightApplication2.Web) add a new Domain Service Class and select the Customers entities:

  4. Click OK and rebuild the solution

Adding RadGridView and RadDomainDataSource

Now that we are ready with the server side, let's go to the client side - the Silverlight project.

  1. Add References to the following Telerik assemblies:

    • Telerik.Windows.Controls (mandatory for both RadGridView and RadDomainDataSource)

    • Telerik.Windows.Data (mandatory for both RadGridView and RadDomainDataSource)

    • Telerik.Windows.Controls.DomainServices (mandatory for RadDomainDataSource)

    • Telerik.Windows.Controls.GridView (mandatory for RadGridView)

    • Telerik.Windows.Controls.Input (mandatory for RadGridView)

  1. Now add the RadGridView and RadDomainDataSource controls to the user control. 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.

XAML

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:server="clr-namespace:SilverlightApplication2.Web"             
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDomainDataSource Name="customersDomainDataSource" 
                                     QueryName="GetCustomersQuery"
                                     AutoLoad="True">    
            <telerik:RadDomainDataSource.DomainContext>
                <server:NorthwindDomainContext />
            </telerik:RadDomainDataSource.DomainContext>
        </telerik:RadDomainDataSource>

        <telerik:RadGridView Name="customerGridView"
                             ItemsSource="{Binding DataView, ElementName=customersDomainDataSource}"
                             IsBusy="{Binding IsBusy, ElementName=customersDomainDataSource}"/>
    </Grid>
</UserControl>

Several important things to notice:

  • The import of the telerik schema: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

  • The import of the server namespace: xmlns:server="clr-namespace:SilverlightApplication2.Web"

  • Declarations of the RadDomainDataSource and RadGridView.

  • The AutoLoad property of the RadDomainDataSource instructs it to load the data automatically when the page loads.

  • The QueryName points to the query of the domain data service on the server

  • DomainContext - points to the context that has been created on the server

  • DataView - the data that comes from the server is stored in the DataView property, so we bind the RadGridView to it.

  • IsBusy [optional] - bind the IsBusy property of RadGridView to the IsBusy property of the RadDomainDataSource so you get a loading indicator during the load operation.

  • Click Ctrl + F5 to run the application and see RadGridView populated with the data from the Customers table.

A sample project can be downloaded from here.