How to Create Advanced Custom EditApointmentDialog

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 20 Sep 2012 Link to this post

    Requirements

    RadControls version Q2 2012
    .NET version 4.0
    Visual Studio version 2010
    programming language C#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    RadScheduleView is designed to work in such a way that the appointment properties do not notify the UI while the EditAppointmentDialog is opened. Also if the appointment is changed and the edit is canceled, edited properties are not saved.

    The provided project demonstrates how to create a custom ViewModel for your dialog that will allow to update the appointment properties and reflect the changes immediately.

    Here are the basic steps:

    1. Create a new class ( CustomDialogViewModel in our case). There will be kept DependencyProperties of the appointment properties that have to be tracked and updated. In the example project there is a custom property Duration which needs to be changed when Start or End of the appointment is changed:

      public class CustomDialogViewModel : DependencyObject
      {      
          public static readonly DependencyProperty DurationProperty =
              DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(CustomDialogViewModel),
              null);
        
          public static readonly DependencyProperty StartProperty =
              DependencyProperty.Register("Start", typeof(DateTime), typeof(CustomDialogViewModel),
              new PropertyMetadata(OnStartEndChanged));
        
          public static readonly DependencyProperty EndProperty =
              DependencyProperty.Register("End", typeof(DateTime), typeof(CustomDialogViewModel),
              new PropertyMetadata(OnStartEndChanged));
        
          public TimeSpan Duration
          {
              get { return (TimeSpan)GetValue(DurationProperty); }
              set { SetValue(DurationProperty, value); }
          }
        
          public DateTime Start
          {
              get { return (DateTime)GetValue(StartProperty); }
              set { SetValue(StartProperty, value); }
          }
        
          public DateTime End
          {
              get { return (DateTime)GetValue(EndProperty); }
              set { SetValue(EndProperty, value); }
          }
        
          private static void OnStartEndChanged(DependencyObject s, DependencyPropertyChangedEventArgs e)
          {
              var dvm = s as CustomDialogViewModel;
              dvm.Duration = dvm.End - dvm.Start;
          }
      }
    2. Create an instance of  the newly created CustomAppointmentDialogViewModel into the EditAppointmentTemplate:

      <ControlTemplate x:Key="EditAppointmentTemplate" TargetType="local:SchedulerDialog">
          <Grid x:Name="DialogRoot">
              <Grid.Resources>
                  <example:CustomDialogViewModel
                      Duration="{Binding DataContext.Occurrence.Appointment.Duration, ElementName=DialogRoot, Mode=TwoWay}"
                      Start="{Binding DataContext.ActualStart, ElementName=DialogRoot, Mode=TwoWay}"
                      End="{Binding DataContext.ActualEnd, ElementName=DialogRoot, Mode=TwoWay}"
                      x:Key="CustomDialogViewModel" />
              </Grid.Resources>
           </Grid>       
          ...
      </ControlTemplate>
    3. Bind the controls to the CustomDialogViewModel properties, for example:
    4. <TextBlock Grid.Row="4" Grid.Column="1" Margin="3" VerticalAlignment="Center"
                  Text="{Binding Source={StaticResource CustomDialogViewModel}, Path=Duration, Mode=TwoWay}" />

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.