[Solved] Inline editing with custom appointment template

[Andrea Rapuzzi]

Hi Telerik,
I need help about a situation I'm facing with a RadScheduleView with the following AppointmentStyleSelector set:

<telerik:RadScheduleView.AppointmentStyleSelector>
    <telerik:OrientedAppointmentItemStyleSelector>
        <telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
            <Style TargetType="telerik:AppointmentItem">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template" Value="{StaticResource ActivityTemplate}" />
            </Style>
        </telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
        <telerik:OrientedAppointmentItemStyleSelector.MonthViewStyle>
            <Style TargetType="telerik:AppointmentItem">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template" Value="{StaticResource ActivityTemplate}" />
            </Style>
        </telerik:OrientedAppointmentItemStyleSelector.MonthViewStyle>
    </telerik:OrientedAppointmentItemStyleSelector>
</telerik:RadScheduleView.AppointmentStyleSelector>

Now, I've the Inline Editing option enabled on this control. The thing is that when I type something on the calendar, the appointment is created, but no edit textbox is shown (I've to select another time range on the scheduler to exit the edit mode and the appointment will have just the first typed char as Subject).

What have I to set in my ActivityTemplate to let the Inline Editing work as with no custom appointment template applied?
It's set as follows:

<ControlTemplate x:Key="ActivityTemplate" TargetType="telerik:AppointmentItem">
    <Grid Margin="-2,0,-1,0"
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
          Background="{Binding Category.CategoryBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0.200" Storyboard.TargetName="MouseOverGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.200">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.200" To="0" Storyboard.TargetName="MouseOverGrid" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0.400" Storyboard.TargetName="MouseOverGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation BeginTime="0:0:0.200" Duration="0:0:0.200" To="1" Storyboard.TargetName="MouseOverGrid" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ReadOnly">
                </VisualState>
                <VisualState x:Name="InlineEditing" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <telerik:CommandManager.InputBindings>
            <telerik:InputBindingCollection>
                <telerik:MouseBinding Gesture="LeftDoubleClick" Command="telerikScheduleView:RadScheduleViewCommands.EditAppointment" />
            </telerik:InputBindingCollection>
        </telerik:CommandManager.InputBindings>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="8"/>
        </Grid.ColumnDefinitions>

        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   Fill="#AAAAAAAA" />
        <Rectangle x:Name="SelectionVisual"
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   Fill="DarkSlateGray" Visibility="Collapsed" />

        <Grid VerticalAlignment="Top" Grid.Column="1"
              Width="34" Height="34">
            <Path HorizontalAlignment="Left" VerticalAlignment="Top"
                  Data="M0,0 L10,0 L0,10 z"
                  Fill="Red"
                  Width="17" Height="17" />
            <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  Data="..."
                  Stretch="Uniform" MaxWidth="18" MaxHeight="18"
                  Fill="{Binding Foreground, ElementName=title}" />
        </Grid>

        <TextBlock x:Name="title" Grid.Column="2" Margin="5,8,5,5"
                   Text="{Binding Subject}"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   TextWrapping="Wrap" FontSize="13" FontFamily="Segoe UI Light" />

        <Grid Grid.Column="3" VerticalAlignment="Top" Margin="5,7">
            ...
        </Grid>

        <Grid Grid.Column="4" VerticalAlignment="Top" Margin="5">
            ...
        </Grid>

        <Grid x:Name="MouseOverGrid" Grid.Column="1" Grid.ColumnSpan="5"
              Visibility="Collapsed" Opacity="0">
            <Border x:Name="MouseOverVisual" IsHitTestVisible="False"
                    Background="{telerik:Windows8Resource ResourceKey=StrongBrush}" Opacity="0.1"/>
            <Border x:Name="PART_StartResizeGrip"
                    Background="Transparent" Cursor="SizeNS"
                    HorizontalAlignment="Stretch" VerticalAlignment="Top"
                    Visibility="{Binding IsAllDay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                    dragDrop:DragDropManager.AllowDrag="True" Height="6"
                    dragDrop:DragDropManager.TouchDragTrigger="TapAndHold"/>
            <Border x:Name="PART_EndResizeGrip"
                    Background="Transparent" Cursor="SizeNS"
                    HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
                    Visibility="{Binding IsAllDay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                    dragDrop:DragDropManager.AllowDrag="True" Height="6"
                    dragDrop:DragDropManager.TouchDragTrigger="TapAndHold"/>
            <telerik:RadButton x:Name="DeleteButton"
                               Style="{StaticResource ActivityDeleteButtonStyle}"
                               Command="telerikScheduleView:RadScheduleViewCommands.DeleteAppointment"
                               ClickMode="Press"
                               CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                               Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
                               IsTabStop="False"/>
        </Grid>
    </Grid>
</ControlTemplate>

Thank you!

[Kalin]

Hi Andrea,

I have tested the provided code and appears the explained issue has been caused by the custom ActivityTemplate. You need to replace the TextBox named Title with the ContentPresenter from the default template. You also may need to base Style in the StyleSelector on the default AppointmentItemBaseStyle using Implicit Styles. Please check the attached sample project which uses the provided code.

Hope this helps.

Regards,
Kalin
Telerik

[Andrea Rapuzzi]

Problem solved!
Thank you very much!