Row Height of timeline item and Height of timeline control

[Ishita]

Hello, 
        I am facing a few issue. I am using Grouping in timeline. 
   1.  Row height of each timeline item which overlaps. While overlaping, the items's height is automatically resets and the content is not visible.Kindly refere telerik1.png
  2.  Row height is affected and content elopes when we expand more than one groups. Kindly refer telerik1.png
   3. Total height os this control is to be fixed ? i have large amount of data which is in number of rows too. so even if i put control in a scrollviewer the control's scrolling is not visible! Refer image heightissue.png. 

[Tsvetie]

Hi Ishita,

I can see from the screenshots that you are using a custom item template. Since I do not have your code, I cannot be sure what is causing the problem. In case the information below does not help you, please open a new support ticket and send me a simple running project, demonstrating the problem.

Basically, when there is not enough height for the timeline to show all its items, it starts to overlap them. In this case, the last item could get clipped. If indeed the problem in your case is a result of the small height, you could try the vertical scrollbar functionality. For additional information about this feature, please refer to our online documentation.

Regards,
Tsvetie
Telerik

 

 

[Ishita]

Hi Tsvetie, 
               Yes, Use of Vertical Scrollbar functionality solved my problem. But one problem still persists! 
That is the problem with height of timelinecontrol itself! 
Three images attached herewith to different scenarios.
1. with MaxHeight = 600. But do i need to do for all the time ?
2. With MinHeight = 600, Timeline with no items!
3. With No height , Specified,  Timeline with no items!

Code : 

<StackPanel x:Name="stkTimeLineView" Orientation="Vertical">

                               <telerik:RadTimeline    x:Name="radTimelineView"
                                                      MaxHeight="600"
                                                   SelectionChanged="radTimelineView_SelectionChanged"
                                                   HorizontalAlignment="Stretch"
                                                   GroupPath="GroupDescription"
                                                   GroupExpandMode="Single"
                                                   VerticalAlignment="Stretch"
                                                   Margin="6"
                                                   ScrollViewer.HorizontalScrollBarVisibility="Visible"
                                                   ScrollViewer.VerticalScrollBarVisibility="Visible"
                                                   IsSelectionEnabled="True"
                                                   SelectionMode="Single"
                                                   PeriodStart="{Binding StartDate, Mode=TwoWay}"
                                                   PeriodEnd="{Binding EndDate, Mode=TwoWay}"
                                                   StartPath="StartDate"
                                                   DurationPath="Duration"
                                                   MinimumItemGap="10"
                                                   TimelineItemTemplate="{StaticResource PresidentsTemplate}"
                                                   TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}"
                                                   ToolTipPath="Info"
                                                   VerticalScrollBarVisibility="Auto"

                                                   ItemsSource= "{Binding Path=Data}">
                                   <telerik:RadTimeline.Resources>
                                       <DataTemplate x:Key="TimelineAnnotationTemplate">
                                           <Border Background="Black">
                                               <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5" />
                                           </Border>
                                       </DataTemplate>
                                   </telerik:RadTimeline.Resources>
                                   <telerik:RadTimeline.Intervals>
                                       <telerik:YearInterval />
                                       <telerik:MonthInterval />
                                       <telerik:WeekInterval />
                                       <telerik:DayInterval />
                                       <telerik:HourInterval/>
                                   </telerik:RadTimeline.Intervals>

                                   <telerik:RadContextMenu.ContextMenu>
                                       <telerik:RadContextMenu x:Name="TimelineContextMenu" ItemClick="TimelineContextMenu_ItemClick"></telerik:RadContextMenu>
                                   </telerik:RadContextMenu.ContextMenu>
                               </telerik:RadTimeline>
</StackPanel>

[Tsvetie]

Hello Ishita,

I am not quite sure I understand the end result that you are trying to implement. From the code snippet that you have provided, I can see that you have wrapped the RadTimeline control in a vertical StackPanel. This means that the timeline would determine its height based on the number of rows of items.

On the other hand, by enabling the vertical scrollbars, basically you tell the timeline to show a scrollbar, when its height is not enough to show all its rows of items. This setting contradicts the vertical StackPanel to some extent. In case you decide to use the vertical scrollbar approach, you should remove the StackPanel, or set the Height of the RadTimeline control.

Unfortunately, I do not have enough information in order to suggest an approach. Could you please open a new support ticket and send me a simple running project, demonstrating the problem, together with detailed information on the expected result?

Regards,
Tsvetie
Telerik