This is a migrated thread and some comments may be shown as answers.

TimeLineViewDefinition header format

7 Answers 95 Views
ScheduleView
This is a migrated thread and some comments may be shown as answers.
Christie Admin
Top achievements
Rank 1
Christie Admin asked on 16 Jan 2014, 06:30 PM
Hi,

I would like to know how it's possible in the header of each column to have only the first day instead of having the beginning and the end of the week.

Thank's
Alain

7 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 22 Jan 2014, 09:11 AM
Hello Alain,

The required approach can be achieved by customizing the TimeRulerItemTemplateSelector property of the ScheduleView and more specifically the HorizontalTimelineGroupTemplate

I have attached a sample project to demonstrate exactly the approach, please download the attachment and give it a try.

Hope this helps.

Regards,
Yana
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Christie Admin
Top achievements
Rank 1
answered on 22 Jan 2014, 02:07 PM
Hi Yana,

that's axactly what I want except one thing, can you tell me how to hide the time header, the one below the date header?

Thank's
Alain
0
Yana
Telerik team
answered on 23 Jan 2014, 11:33 AM
Hi Alain,

In order to remove completely the time header you should customize the TimeRulerItemStyleSelector and set Height to "0" to the MajorHorizontalTickStyle and MinorHorizontalTickStyle.  I've updated the project with the needed changes. However note that in the project I have used Implicit Styles in order to make such customizations easier.

Hope this helps.

Regards,
Yana
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Christie Admin
Top achievements
Rank 1
answered on 23 Jan 2014, 02:14 PM
Hi, Yana,

thank you so much :) I you look at the picture, I can see a display issue using the Office 2013 theme.

Thank's
Alain
0
Yana
Telerik team
answered on 28 Jan 2014, 08:37 AM
Hi Alain,

I have tried to reproduce the issue shown in the screenshot in the sample project, but without much success.  I have attached the updated project, could you please download it and give it a try? What is different in your case?

Regards,
Yana
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Christie Admin
Top achievements
Rank 1
answered on 29 Jan 2014, 05:21 PM
Honnestly I don't what is the difference between my project and your's :(

Here is my xaml:

<UserControl x:Class="AppointmentControls.SearchResultByWeek.SearchResultByWeek"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:AppCtrl="clr-namespace:AppointmentControls"
             xmlns:ViewModel="clr-namespace:AppointmentControls"
             xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300" x:Name="Me">

    <UserControl.Resources>
        <ResourceDictionary>
            <ViewModel:ViewModel x:Key="ViewModel" />

            <local:TimeRulerItemTemplateSelector x:Key="CustomTimeRulerItemTemplateSelector">
                <local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding DateTime, StringFormat=yyyy-MM-dd}" Margin="2 1" TextAlignment="Left"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                    <DataTemplate>
                        <!--<TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>-->
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="1 2" TextAlignment="Right">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90"/>
                            </TextBlock.LayoutTransform>
                        </TextBlock>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                <local:TimeRulerItemTemplateSelector.MonthItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.MonthItemTemplate>
            </local:TimeRulerItemTemplateSelector>
            <Style x:Key="CustomMajorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                <Setter Property="Height" Value="0" />
            </Style>
            <Style x:Key="CustomMinorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                <Setter Property="Height" Value="0" />
            </Style>
            <local:OrientedTimeRulerItemStyleSelector x:Key="CustomTimeRulerItemStyleSelector"
            MonthViewGroupStyle="{StaticResource TimeRulerMonthViewGroupItemStyle}"
            MonthViewTickStyle="{StaticResource TimeRulerMonthViewItemStyle}"
            MonthViewTodayTickStyle="{StaticResource TimeRulerMonthViewTodayItemStyle}"
            HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}"
            VerticalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle_Vertical}"
            MajorHorizontalTickStyle="{StaticResource CustomMajorHorizontalTimeRulerItemStyle}"
            MajorVerticalTickStyle="{StaticResource MajorVerticalTimeRulerItemStyle}"
            MinorHorizontalTickStyle="{StaticResource CustomMinorHorizontalTimeRulerItemStyle}"
            MinorVerticalTickStyle="{StaticResource MinorVerticalTimeRulerItemStyle}"
            HorizontalLineStyle="{StaticResource TimeRulerLineStyle}"
            VerticalLineStyle="{StaticResource TimeRulerLineStyle}"/>

            <Style x:Key="TimeRulerGroupItemStyle" TargetType="local:TimeRulerGroupItem">
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Margin" Value="0 0 -1 -1" />
                <Setter Property="Panel.ZIndex" Value="100" />
                <Setter Property="Padding" Value="4 2" />                
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:TimeRulerGroupItem">
                            <telerik:RadButton BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Command="local:RadScheduleViewCommands.SetDayViewMode" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.DateTime.Date}">
                                <ContentPresenter x:Name="Content" />
                            </telerik:RadButton>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <local:OrientedTimeRulerItemStyleSelector x:Key="TimeRulerItemStyleSelector" HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}" />

            <AppCtrl:SearchResultSlotStyleSelector x:Key="CustomSpecialSlotStyleSelector">
                <AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
                    <Style TargetType="telerik:HighlightItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Border Background="{Binding Slot.Background}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
            </AppCtrl:SearchResultSlotStyleSelector>

            <DataTemplate x:Key="FreeSlotTemplate">
                <Grid Margin="-2 0 -1 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Ellipse Grid.Column="0" Margin="2 1 2 0" Stretch="Fill" Fill="{Binding Appointment.ResultAccuracyColor}" Width="10" Height="10" Stroke="Black" StrokeThickness="1.0" />
                    <TextBlock Grid.Column="1" Margin="0 0 0 0" Text="{Binding Appointment.Subject}"  HorizontalAlignment="Left" VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/System.Windows.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Input.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.ScheduleView.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="Root" DataContext="{StaticResource ViewModel}">
        <telerik:RadScheduleView x:Name="ScheduleView" Panel.ZIndex="1" SnapAppointments="True" AppointmentSelectionChanged="RadScheduleView_AppointmentSelectionChanged" AppointmentEditing="ScheduleView_AppointmentEditing" AppointmentEdited="ScheduleView_AppointmentEdited" IsInlineEditingEnabled="False" FirstDayOfWeek="Monday" ActiveViewDefinitionIndex="0" NavigationHeaderVisibility="Collapsed" MinTimeRulerExtent="200" MaxTimeRulerExtent="500" SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" AppointmentItemContentTemplate="{StaticResource FreeSlotTemplate}" TimeRulerItemStyleSelector="{StaticResource TimeRulerItemStyleSelector}" ShowDialog="SearchResultView_ShowDialog" TimeRulerItemTemplateSelector="{StaticResource CustomTimeRulerItemTemplateSelector}" MouseEnter="ScheduleView_MouseEnter" MouseLeave="ScheduleView_MouseLeave">
            <telerik:RadScheduleView.ViewDefinitions>
                <telerik:TimelineViewDefinition x:Name="View" FirstDayOfWeek="Monday" GroupTickLength="7d" MinorTickLength="7d" MajorTickLength="7d" VisibleDays="70" TimerulerMajorTickStringFormat="" TimerulerMinorTickStringFormat="" MinTimeRulerExtent="600" MaxTimeRulerExtent="Infinity" StretchAppointments="True" StretchGroupHeaders="True" TimerulerGroupStringFormat="{}{0:yyyy-MM-dd}" />
            </telerik:RadScheduleView.ViewDefinitions>

            <telerik:RadScheduleView.ResourceTypesSource>
                <telerik:ResourceTypeCollection>
                    <telerik:ResourceType Name="DaysOfTheWeek">
                        <telerik:Resource ResourceName="Monday" DisplayName="Lun" />
                        <telerik:Resource ResourceName="Tuesday" DisplayName="Mar" />
                        <telerik:Resource ResourceName="Wednesday" DisplayName="Mer" />
                        <telerik:Resource ResourceName="Thursday" DisplayName="Jeu" />
                        <telerik:Resource ResourceName="Friday" DisplayName="Ven" />
                        <telerik:Resource ResourceName="Saturday" DisplayName="Sam" />
                        <telerik:Resource ResourceName="Sunday" DisplayName="Dim" />
                    </telerik:ResourceType>
                    <telerik:ResourceType Name="PartsOfTheDay">
                        <telerik:Resource ResourceName="NG" DisplayName="NU" />
                        <telerik:Resource ResourceName="AM" DisplayName="AM" />
                        <telerik:Resource ResourceName="PM" DisplayName="PM" />
                        <telerik:Resource ResourceName="EV" DisplayName="SO" />
                    </telerik:ResourceType>
                </telerik:ResourceTypeCollection>
            </telerik:RadScheduleView.ResourceTypesSource>

            <telerik:RadScheduleView.GroupDescriptionsSource>
                <telerik:GroupDescriptionCollection>
                    <telerik:ResourceGroupDescription ResourceType="DaysOfTheWeek" />
                    <telerik:ResourceGroupDescription ResourceType="PartsOfTheDay" />
                </telerik:GroupDescriptionCollection>
            </telerik:RadScheduleView.GroupDescriptionsSource>

            <telerik:RadScheduleView.DragDropBehavior>
                <AppCtrl:SearchResultCustomDragDropBehavior />
            </telerik:RadScheduleView.DragDropBehavior>
        </telerik:RadScheduleView>
    </Grid>
</UserControl>
0
Yana
Telerik team
answered on 31 Jan 2014, 10:08 AM
Hi Alain,

Still, I am not able to replicate the issue with the provided code. Can you confirm that you're using our latest release? Is it possible to try create a runnable sample and send it to us, so we to be able to research the case? Note that you should open a support ticket and attach the sample there.

I would like to make a note here  - I've noticed that you've merged the theme resource dictionaries inside the UserControl - the recommended approach is to merge them in App.xaml, as for example, EdtiAppointmentDialog, when shown, is placed in a different visual tree and in the current way, will not receive its Style.

I am looking forward to your reply.

Regards,
Yana
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
ScheduleView
Asked by
Christie Admin
Top achievements
Rank 1
Answers by
Yana
Telerik team
Christie Admin
Top achievements
Rank 1
Share this question
or