Custom AppointmentDialogViewModel

[Aaron]

Hello,

I've created a custom AppointmentDialogViewModel - "CalendarDialogViewModel" - and I'm trying to bind to it from the control template of the RadScheduleView's Edit Appointment Dialog.

In the constructor for my view - "ucCalendarView" - I'm instantiating the dialog's view-model as a private field in the view's code-behind:

public ucCalendarView(ViewModels.CalendarViewModel.CalendarState state)
{
    this.DataContext = new ViewModels.CalendarViewModel(state);
    this._calendarDialogViewModel = new CalendarDialogViewModel();
    this._calendarDialogViewModel.State = state;
    InitializeComponent();
}

This is how I'm setting "_calendarDialogViewModel" as the dialog's DataContext:
 

/// <summary>
/// The custom AppointmentDialogViewModel--CalendarDialogViewModel--is set here.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void controlTemplateRootGrid_Loaded(object sender, RoutedEventArgs e)
{
    // Save the dialog view-model:
    this._calendarDialogViewModel.DialogViewModel = (AppointmentDialogViewModel)((FrameworkElement)sender).DataContext;

    // Initialize start and end times:
    this._calendarDialogViewModel.DialogViewModel.ActualStart = new DateTime(DateTime.Now.Year,
        DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.AddHours(1).Hour, 0, 0);
    this._calendarDialogViewModel.DialogViewModel.ActualEnd =
        this._calendarDialogViewModel.DialogViewModel.ActualStart.AddHours(1);

    // Substitute the CalendarDialogViewModel for the default one:
    ((FrameworkElement)sender).DataContext = this._calendarDialogViewModel;
}

 

"controlTemplateRootGrid" is the Grid immediately inside the "EditAppointmentTemplate" ControlTemplate.  I have a RadComboBox inside this Grid and its SelectedItem property is bound like this:

 

<telerik:RadComboBox x:Name="rcmbClassResourceSelection"
    Grid.Row="0" Grid.Column="4" Width="100"
    Margin="3"
    SelectedItem="{Binding DialogViewModel.Occurrence.Appointment.SqlAppointmentClass, Mode=TwoWay}"
    IsEditable="False"
    telerik:StyleManager.Theme="{StaticResource Theme}">
    <telerik:RadComboBox.Items>
        <telerik:RadComboBoxItem Content="Appointment"/>
        <telerik:RadComboBoxItem Content="Due"/>
        <telerik:RadComboBoxItem Content="Tickler"/>
    </telerik:RadComboBox.Items>
</telerik:RadComboBox>

 

Now when I create a new appointment, the following method in my CalendarDialogViewModel executes.

 

public void OnAppointmentCreating(object sender, AppointmentCreatingEventArgs e)
{
    // Set the SqlAppointmentClass of the appointment being created:
    (e.Appointment as SqlAppointment).SqlAppointmentClass = this.SqlAppointmentClass;

}

 

But when the Edit Appointment Dialog appears, the RadComboBox has no selected item.  I've tried a number of different things with no success as yet.  I'm trying to figure out how I should set the Edit Appointment dialog's DataContext to my custom view-model and how to do the data binding.

Cheers,
Aaron

[Aaron]

I've found another problem that is probably related to what I've described above.

The changes I make to e.Appointment in the AppointmentCreating event handler aren't carrying over to CalendarDialogViewModel.DialogViewModel.Occurrence.Appointment (where "DialogViewModel" is the AppointmentDialogViewModel property in my custom view-model).

For example, if I add a resource to e.Appointment.Resources in the AppointmentCreating event handler, when my DialogViewModel property has been instantiated with the default AppointmentDialogViewModel the Occurrence.Appointment.Resources property has a Count of zero.

[Yana]

Hello Aaron,

I have attached a simple example based on your code to demonstrate how all this should work. The main change is in the ComboBox ( note SelectedValue and SelectedValuePath properties):

<telerik:RadComboBox x:Name="rcmbClassResourceSelection"
    Grid.Row="5" Grid.Column="1" Width="100"
    Margin="3"
    SelectedValue="{Binding DialogViewModel.Occurrence.Appointment.SqlAppointmentClass, Mode=TwoWay}"
    SelectedValuePath="Content"
    IsEditable="False">
    <telerik:RadComboBox.Items>
        <telerik:RadComboBoxItem Content="Appointment"/>
        <telerik:RadComboBoxItem Content="Due"/>
        <telerik:RadComboBoxItem Content="Tickler"/>
    </telerik:RadComboBox.Items>
</telerik:RadComboBox>

Note that I have used Implicit Styles in order to avoid copying all the resources. Please download the attachment and give it a try.

All the best,
Yana
the Telerik team

[Aaron]

Hi, Yana

Thanks! Using SelectedValue and SelectedValuePath solved the problem.