Custom GanttTask and template of event on timeruler

3 posts, 0 answers
  1. Grzesiek
    Grzesiek avatar
    105 posts
    Member since:
    Jun 2007

    Posted 03 Sep 2019 Link to this post

    Hello,

     

    Can anyone tell me how can I set my own template of event on time ruler?

    I have field called SubTitle and EventContainer style like below:

     

     <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerik:EventContainer">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid Grid.Column="0" Margin="{TemplateBinding Padding}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="*" />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <TextBlock Text="{Binding SubTitle}" />

                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>

     

    But nothing is displaying. If I change binding to Title, it works.

  2. Grzesiek
    Grzesiek avatar
    105 posts
    Member since:
    Jun 2007

    Posted 03 Sep 2019 in reply to Grzesiek Link to this post

    Ok, this almost works fine, but my defined before CustomTooltipTemplate is now not showing. Any idea?

    <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerik:EventContainer">
                                        <Grid>
                                            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Border>
                                            <TextBlock Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}">
                                                <TextBlock.Text>
                                                    <MultiBinding StringFormat="{}{0}  ({1}os.)">
                                                        <Binding Path="OriginalEvent.Title" />
                                                        <Binding Path="OriginalEvent.NumberOfPeople" />
                                                    </MultiBinding>
                                                </TextBlock.Text>
                                            </TextBlock>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>

  3. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1180 posts

    Posted 05 Sep 2019 Link to this post

    Hello Grzesiek,

    When editing the control templates of the elements, we recommend staying as close as possible to the original template as otherwise some of the functionality of the controls might be lost.

    In this particular scenario, to successfully show the snippet, you need to add the following lines to your custom template:

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:EventContainer">
                            <Grid>
                                <telerik:ToolTipManager.ToolTip>
                                    <ToolTip ContentTemplate="{TemplateBinding ToolTipTemplate}" Content="{Binding OriginalEvent}"/>
                                </telerik:ToolTipManager.ToolTip>
                                <Border Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Border>
                                <TextBlock Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}" Text="{Binding OriginalEvent.Title}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
    For your convenience, I'm also pasting the original template of the EventContainer control in the Office_Black theme should you decide to work with it instead:

                        <ControlTemplate TargetType="telerik:EventContainer">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseOverHighlighted">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource EventBackground_MouseOverHighlighted}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Event_OuterBorderBrush_MouseOverHighlighted}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundInnerBorder" Storyboard.TargetProperty="Stroke">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Event_InnerBorderBrush_MouseOverHighlighted}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="CommonStatesVisual" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="HighlightStates">
                                        <VisualState x:Name="NotHighlighted"/>
                                        <VisualState x:Name="Highlighted">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="HighlightVisual" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="BackgroundBorder"
                        CornerRadius="{StaticResource Event_OuterCornerRadius}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                                    <Rectangle x:Name="BackgroundInnerBorder"
                            Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                            StrokeThickness="1"
                            Fill="Transparent"
                            RadiusX="{StaticResource Event_RadiusX}"
                            RadiusY="{StaticResource Event_RadiusY}"/>
                                </Border>
                                <Border x:Name="CommonStatesVisual"
                        Visibility="Collapsed"
                        CornerRadius="{StaticResource Event_OuterCornerRadius}"
                        BorderBrush="{StaticResource Event_OuterBorderBrush_Selected}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{StaticResource EventBackground_Selected}">
                                    <Rectangle
                            Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                            StrokeThickness="1"
                            Fill="Transparent"
                            RadiusX="{StaticResource Event_RadiusX}"
                            RadiusY="{StaticResource Event_RadiusY}"/>
                                </Border>
                                <Border x:Name="HighlightVisual"
                        Visibility="Collapsed"
                        Background="{StaticResource EventBackground_Highlighted}"
                        CornerRadius="{StaticResource Event_OuterCornerRadius}"
                        BorderBrush="{StaticResource Event_OuterBorderBrush_Highlighted}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <Rectangle
                            Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                            StrokeThickness="1"
                            Fill="Transparent"
                            RadiusX="{StaticResource Event_RadiusX}"
                            RadiusY="{StaticResource Event_RadiusY}"/>
                                </Border>
                                <Border x:Name="MouseOverVisual"
                        Visibility="Collapsed"
                        CornerRadius="{StaticResource Event_OuterCornerRadius}"
                        BorderBrush="{StaticResource Event_OuterBorderBrush_MouseOver}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{StaticResource EventBackground_MouseOver}">
                                    <Rectangle
                            Stroke="{StaticResource Event_InnerBorderBrush_MouseOver}"
                            StrokeThickness="1"
                            Fill="Transparent"
                            RadiusX="{StaticResource Event_RadiusX}"
                            RadiusY="{StaticResource Event_RadiusY}"/>
                                </Border>
                                <Grid Grid.Column="1" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock x:Name="txtBlock" Text="{Binding Title}" FontSize="{TemplateBinding FontSize}"/>
                                    <telerik:ProgressPresenter Grid.Row="1" VerticalAlignment="Bottom" Height="2" Margin="0 0 0 2" HorizontalAlignment="Stretch" Progress="{Binding Progress}" Orientation="Horizontal">
                                        <Rectangle Fill="{StaticResource ProgressFill}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                    </telerik:ProgressPresenter>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
    If you're using another theme, however, you need to extract and modify its template accordingly.

    I hope you find this helpful. Please let me know if you require any additional assistance on the matter.

    Regards,
    Dilyan Traykov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top