MVVM Usage

This article shows how to create a database using the code-first approach and display data with the help of RadEntityFrameworkDataSource and RadGridView.

Before proceeding with this tutorial, you should follow the "Entity Framework" MSDN articles including the Code First to a New Database one.

Creating the Application and Adding References

In order to get started, you can create a new project and add the EntityFramework NuGet.

Figure 1: EntityFramework NuGet

Then you can add the needed Telerik references.

• Telerik.Windows.Controls
• Telerik.Windows.Controls.Data
• Telerik.Windows.Controls.EntityFramework60
• Telerik.Windows.Controls.GridView
• Telerik.Windows.Controls.Input
• Telerik.Windows.Data

Adding the Models and DbContext

We will create two classes, which will serve as our models: Customer and Order, where each customer will have a collection of orders. We will also define a DbContext that will hold the entities.

Example 1: Defining the Models, DbContext and ViewModel

public class Customer 
{ 
    [Key] 
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
    public int CustomerId { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public virtual List<Order> Orders { get; set; } 
} 
 
public class Order 
{ 
    [Key] 
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
    public int Id { get; set; } 
    public DateTime Date { get; set; } 
 
    public int CustomerId { get; set; } 
 
    [ForeignKey("CustomerId")] 
    public virtual Customer Customer { get; set; } 
} 
 
public class MyContext : DbContext 
{ 
    public MyContext(string connString) : base(connString) 
    { 
    } 
 
    public DbSet<Customer> Customers { get; set; } 
    public DbSet<Order> Orders { get; set; } 
} 

Populating the Database

We will create a viewmodel that will populate our database and also hold an instance of a QueryableEntityCollectionView that will be the bridge between the RadGridView and our database. We will also introduce a command that will execute the SaveChanges method of the DbContext on a button's click.

Example 2: Defining the ViewModel

public class ViewModel : ViewModelBase 
{ 
    private QueryableEntityCollectionView<Customer> entityCollectionView; 
 
    private MyContext context; 
 
    public ViewModel() 
    { 
        // You might need to update the connection string to suit the setup on your machine  
        this.context = new MyContext(@"Data Source=.\SQLEXPRESS;Initial Catalog=CustomerDB;Integrated security=true"); 
        this.SaveCommand = new DelegateCommand(Save); 
 
        this.AddData(context); 
        this.EntityCollectionView = new QueryableEntityCollectionView<Customer>(((IObjectContextAdapter)context).ObjectContext, "Customers", new Collection<string>() { "Orders" }); 
    } 
 
    public DelegateCommand SaveCommand { get; } 
 
    public QueryableEntityCollectionView<Customer> EntityCollectionView 
    { 
        get { return entityCollectionView; } 
        set 
        { 
            this.entityCollectionView = value; 
            this.OnPropertyChanged(() => this.EntityCollectionView); 
        } 
    } 
 
    private void AddData(MyContext context) 
    { 
        for (int i = 1; i <= 25; i++) 
        { 
            var customer = new Customer() { FirstName = "First Name " + i, LastName = "Last Name" + i }; 
 
            for (int j = 1; j <= 10; j++) 
            { 
                var order = new Order() { CustomerId = i, Customer = customer, Date = DateTime.Today.AddDays(-j) }; 
                context.Orders.Add(order); 
            } 
            context.Customers.Add(customer); 
        } 
 
        context.SaveChanges(); 
    } 
 
    public void Save(object obj) 
    { 
        this.context.SaveChanges(); 
    } 
} 

Displaying the Data

All that is left is to declare our XAML and wire up the viewmodel. We will display the data in a RadGridView with a Row Details Template and use a RadDataPager to add paging functionality.

Example 3: Seting up the XAML

 <Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
    <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <telerik:RadGridView GroupRenderMode="Flat" ItemsSource="{Binding PagedSource, ElementName=pager}" AutoGenerateColumns="False"> 
        <telerik:RadGridView.Columns> 
            <telerik:GridViewToggleRowDetailsColumn /> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding CustomerId}" /> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}" /> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" /> 
        </telerik:RadGridView.Columns> 
        <telerik:RadGridView.RowDetailsTemplate> 
            <DataTemplate> 
                <telerik:RadGridView GroupRenderMode="Flat"  ItemsSource="{Binding Orders}" AutoGenerateColumns="False"> 
                    <telerik:RadGridView.Columns> 
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}" /> 
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Date}" /> 
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding CustomerId}" /> 
                    </telerik:RadGridView.Columns> 
                </telerik:RadGridView> 
            </DataTemplate> 
        </telerik:RadGridView.RowDetailsTemplate> 
    </telerik:RadGridView> 
    <telerik:RadDataPager x:Name="pager" Source="{Binding EntityCollectionView}" PageSize="5"  Grid.Row="1" /> 
    <Button Content="Save" Grid.Row="2"> 
        <telerik:EventToCommandBehavior.EventBindings> 
            <telerik:EventBinding EventName="Click" Command="{Binding SaveCommand}" /> 
        </telerik:EventToCommandBehavior.EventBindings> 
    </Button> 
</Grid> 

Figure 2: Result from running the example in the Fluent theme

See also

• Getting Started
• RadGridView