How to: Bind Scheduler to Data using the Entity Framework Code First Approach

• Mar 13, 2021
• 4 minutes to read

This example describes how to bind the Scheduler to a data source using the Entity Framework Code First approach.

Perform the following steps to achieve the required result:

• Create New Scheduling Application
• Create a Data Model
• Create a ViewModel
• Specify Data Source and Mappings in XAML
• Run the Application

Create New Scheduling Application

1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.

2. Add the SchedulerControl object to your project. You can do this by dragging the SchedulerControl item from the DX.19.1: Scheduling Toolbox tab to the canvas.

   

3. Right-click the SchedulerControl object and select Layout | Reset All in the context menu to stretch the SchedulerControl so that it fills the entire window.

Create a Data Model

Note

Before creating a Data Model, make sure that the Entity Framework package is added to your Visual Studio. Refer to the Get Entity Framework article for details on how to install the Entity Framework package.

1. Right-click on the project name. Select Add | New Item.
2. Select Data | ADO .NET Entity Data Model and enter MySchedulerModel for the name.

3. In the Entity Data Model Wizard, select Code First from database to generate an EF model based on your database.

   Click Next and select the database to be used (in this example, we use CarsDB.mdf data source). Then select the desired tables and click Finish.

   As a result, new classes are added to your solution. The MySchedulerModel class is the DBContext class descendant which allows you to query and save entity class instances. Other classes represent individual database tables.

   

Create a ViewModel

Add a new folder to your project. Right-click the project’s name in the Solution Explorer, and then select Add | New Folder. Change the folder name to ViewModel.

Add a MainViewModel class. In the Solution Explorer, right-click the ViewModel folder, and then select Add | Class…. In the invoked Add New Item window, assign the MainViewModel name to the class.

Add the following code to handle data interaction:

1. Apply the POCOViewModel attribute to your View Model. Refer to the POCO ViewModel topic for details;

2. The Data Model created in previous section (the MySchedulerModel class instance) is the data source to fill two ObservableCollection type collections which are used for data binding;

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainViewModel.vb

   Private mySchedulerContext As MySchedulerModel
   Public Overridable Property Resources() As ObservableCollection(Of Car)
   Public Overridable Property Appointments() As ObservableCollection(Of CarScheduling)
   

   MainViewModel.cs

   MySchedulerModel mySchedulerContext;
   public virtual ObservableCollection<Car> Resources { get; set; }
   public virtual ObservableCollection<CarScheduling> Appointments { get; set; }
   

3. Declare a method that implements the AppointmentsUpdatedCommand. In the method body, call the MySchedulerModel instance’s SaveChanges method to save newly created appointments;

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainViewModel.vb

   Public Sub AppointmentsUpdated()
       mySchedulerContext.SaveChanges()
   End Sub
   

   MainViewModel.cs

   public void AppointmentsUpdated()
   {
       mySchedulerContext.SaveChanges();
   }
   

4. Create a method for the InitNewAppointmentCommand, as shown in the code example below:

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainViewModel.vb

   Public Sub InitNewAppointment(ByVal args As AppointmentItemEventArgs)
       args.Appointment.Reminders.Clear()
   End Sub
   

   MainViewModel.cs

   public void InitNewAppointment(AppointmentItemEventArgs args)
   {
       args.Appointment.Reminders.Clear();
   }
   

5. Fill the Appointments and Resources collection with data using the Load method.

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainViewModel.vb

   Protected Sub New()
       mySchedulerContext = New MySchedulerModel()
       mySchedulerContext.Cars.Load()
       Resources = mySchedulerContext.Cars.Local
       mySchedulerContext.CarSchedulings.Load()
       Appointments = mySchedulerContext.CarSchedulings.Local
   End Sub
   

   MainViewModel.cs

   protected MainViewModel() {
       mySchedulerContext = new MySchedulerModel();
       mySchedulerContext.Cars.Load();
       Resources = mySchedulerContext.Cars.Local;
       mySchedulerContext.CarSchedulings.Load();
       Appointments = mySchedulerContext.CarSchedulings.Local;
   }
   

Set Mapping and Binding in XAML

1. Use the ViewModelSource to set the DataContext property to the ViewModel as follows:

   XAML

   DataContext="{dxmvvm:ViewModelSource local:MainViewModel}"
   

2. Use the EventToCommand behaviors to bind the AppointmentUpdated and InitNewAppointment events to the related commands:

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainWindow.xaml

   <dxmvvm:Interaction.Behaviors>
       <dxmvvm:EventToCommand EventName="AppointmentsUpdated" Command="{Binding AppointmentsUpdatedCommand}" />
       <dxmvvm:EventToCommand EventName="InitNewAppointment" Command="{Binding InitNewAppointmentCommand}" PassEventArgsToCommand="True" />
   </dxmvvm:Interaction.Behaviors>
   

3. Set the required mappings as shown in the code snippet below:

   Note

   A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-scheduler-to-data-using-the-entity-framework-code-first-approach-t545436.

   MainWindow.xaml

   <dxsch:SchedulerControl.DataSource>
       <dxsch:DataSource AppointmentsSource="{Binding Appointments}" ResourcesSource="{Binding Resources}">
           <dxsch:DataSource.AppointmentMappings>
               <dxsch:AppointmentMappings Start="StartTime" 
                                          End="EndTime" 
                                          AllDay="AllDay" 
                                          Subject="Subject" 
                                          Id="ID" 
                                          Description="Description" 
                                          LabelId="Label" 
                                          Location="Location" 
                                          RecurrenceInfo="RecurrenceInfo" 
                                          Reminder="ReminderInfo" 
                                          ResourceId="CarId" 
                                          StatusId="Status" 
                                          Type="EventType" />
           </dxsch:DataSource.AppointmentMappings>
           <dxsch:DataSource.ResourceMappings>
               <dxsch:ResourceMappings Id="ID" 
                                       Caption="Model" />
           </dxsch:DataSource.ResourceMappings>
       </dxsch:DataSource>
   </dxsch:SchedulerControl.DataSource>
   <dxsch:DayView ResourcesPerPage="3" />
   <dxsch:MonthView/>
   

Run the Application

The following image demonstrates the result: