Vertical Scrollbar/ScrollViewer and RadTimeline

[Barry]

I would like to put my timeline at the top half of a grid that has a gridview on the bottom half of the page. I would like to have the timeline take up as much room as it needs even if it needs more than half of the screen, so I wanted to put a scrollviewer around the timeline so it would be able to take up as much room as possible vertically (screenshot 2 - looks fine) and be able to scroll to the part of the timeline that is not visible, but when I wrap a scrollviewer around the timeline it stops showing items (screenshot 3 - no items).

I have the need to put hundreds of items in the timeline and when you do that and you only have a limited space it becomes unusable (screenshot 1)... that is why I need the vertical scrollbar. Is there any way to achieve this?

[Tsvetie]

Hi Barry,

From the provided screenshots, I can see that, for some reason, not only the timeline items are missing, but the timeline labels as well. However, I was not able to reproduce the problem by simply wrapping a timeline control in a scrollviewer. Here is my code:

<ScrollViewer VerticalScrollBarVisibility="Visible">
    <telerik:RadTimeline x:Name="RadTimeline1"
                        Height="800"
                        PeriodStart="2011/01/01" PeriodEnd="2020/01/01"
                        VisiblePeriodStart="2011/03/03" VisiblePeriodEnd="2011/04/04"
                        StartPath="EventStartDate"
                        DurationPath="EventInterval"
                        ItemsSource="{Binding AllItems}">
        <telerik:RadTimeline.Intervals>
            <telerik:DayInterval />
            <telerik:WeekInterval />
            <telerik:MonthInterval />
            <telerik:YearInterval />
        </telerik:RadTimeline.Intervals>
    </telerik:RadTimeline>
</ScrollViewer>

That is why, I suppose there is something specific to your scenario that leads to the described result. Could you please open a new support ticket and send us a running test project, demonstrating this problem?

Greetings,
Tsvetie
the Telerik team

[Barry]

Tsvetie,

I just found out the reason I'm not showing anything and you are. You put a height on your timeline and I did not. If you take the height off of your timeline it will not show items or labels when inside of a scroll viewer.

This poses an issue because I don't want to have to set a height for the timeline because I don't know how many items will be displayed on it - it could be 12 items or it could be 1200 items. I just want the timeline to take up as much height as it needs to display the items clearly to where someone will find it useful instead of a jumbled mess.

The other issue that I am having is now that I can get it into a scroll viewer (with the height property set), the bottom bar where you choose the visible period ends up having to be scrolled to, which makes setting a visual period nearly impossible because you can't see the dates you want to set it to with the timeline labels at the top hidden by scrolling to the bottom where the bar is.

Are there ANY plans to include an optional minimum height (possibly margin or padding) for items and to show a vertical scrollbar on the control if the number of items with the minimum height end up being taller than the control? A vertical scroolbar actually ON the control would be the BEST option. Having the items (where there are a lot of them) scrunch up to the available space makes the control UNUSABLE, also putting it in an external scroll viewer with the height set and having the visible period bar at the bottom and the labels at the top make it almost unusable.

Also I wouldn't even know what to set the height to anyway because I don't know how much room is needed to make a certain amount of items look good, and I don't know how many items will be returned anyway. I could try to set the height dynamically based on the number of items returned and some formula I come up with that comes up with a height that I think each items needs horizontally, but that still leaves the visible period bar at the bottom and the labels at the top.

Any ideas?

[Barry]

Here is the only option that comes close to what I want...

I have a grid with three rows... I have three timeline controls in those rows and have the row definitions set to:

<RowDefinition Height="35" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />

I have the middle timeline surrounded by a scroll viewer with the top and bottom timelines only showing the top and bottom of the control with negative margins and specific heights so all three controls look like one control... I get the vertical scroll bar and with all three timelines on the same binding I can get them to sync with the VisiblePeriodChanged event, but unfortunately there is no VisiblePeriodCHANGING event so it doesn't look like the normal timeline that changes as you adjust the bottom bar - the items and date label only change after you have adjusted the bottom scrollbar.

Is there a better way to do it?

[Tsvetie]

Hi Barry,

Straight to your questions:

1. RadTimeline for Silverlight does not offer automatically calculated height based on the timeline items functionality. The only suggestion that I can give, is to set a fixed Height to the control that ensures enough space for the items or calculate that height dynamically, as you mentioned.
2.  Regarding the ScrollViewer - I think it would be better to create a custom theme for the timeline control and set the calculated height to the container for the timeline items and wrap this container in a scrollViewer. The container I am referring to, is TimelineItemContainer. For example: 

   <ScrollViewer VerticalScrollBarVisibility="Visible" BorderThickness="0" Grid.Row="2" Grid.RowSpan="1">
       <timelines:TimelineItemContainer Height="800"
                                       ItemsSource="{TemplateBinding DataItems}"
                                       DataGroups="{TemplateBinding DataGroups}"
                                       ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}">
           <timelines:TimelineItemContainer.ItemsPanel>
               <ItemsPanelTemplate>
                   <timelines:VirtualizingTimelinePanel Slider="{Binding ElementName=PART_Slider}" />
               </ItemsPanelTemplate>
           </timelines:TimelineItemContainer.ItemsPanel>
           <timelines:TimelineItemContainer.Template>
               <ControlTemplate>
                   <ItemsPresenter />
               </ControlTemplate>
           </timelines:TimelineItemContainer.Template>
       </timelines:TimelineItemContainer>
   </ScrollViewer>

   For additional information on custom themes, please refer to our online documentation.

Greetings,
Tsvetie
the Telerik team

[Barry]

Tsvetie,

I don't have the latest Themes solution with the Timeline code... where can I get it? I'm using Silverlight 4.

Barry

[Tsvetie]

Hi Barry,

In case I understand you correctly, you are using Q1 2012 SP1, please correct me if I am wrong. If this is the case, indeed there are a couple of changes that we made. Basically, we introduced new assemblies, apart from the ones we usually ship, in the Binaries.NoXaml folder. The idea of these assemblies is to use them with implicit styles instead of the current way of styling. In the assemblies from the Binaries you have all the XAML for all components for all themes included in the dll and the styling is done with explicitly set styles. With the Binaries.NoXaml you will get assemblies with absolutely no XAML included and you can add manually only needed resources for your application. You can find additional information about the new binaries in this forum post - http://www.telerik.com/community/forums/wpf/gridview/radcontrols-for-wpf-q1-2012-sp1-binaries-noxaml.aspx#2045462

Because of this, we had to introduce some changes to the themes structure - now, there is only one XAML file for an assembly - e.g. there is no TimeBar.xaml, BulletGraph.xaml, etc., but there is Telerik.Windows.Controls.DataVisualization.xaml. That is why, now, in order to make changes to the XAML of the timeline control, you have to change the Telerik.Windows.Controls.DataVisualization.xaml.

In case you decide to use the implicit styles approach, you should be able to use the steps, described in the forum post. On the other hand, in case you prefer to build a custom theme, follow these steps:

• Download an older version (than Q1 2012) of the controls - you can use the themes solution and project files to build your custom theme.
• In this old Themes solution, open the theme project that you want to base your custom theme on.
• Delete all XAML files from the csproj file - they contain the old styles
• Download the RadControls_for_Silverlight5_2012_1_0326_Dev ZIP file. The Silverlight4 ZIP file contains only DLLs, that is why, you need the Silverlight5 ZIP files to get the XAML files.
• Copy the XAML files from the Themes folder of the ZIP file to the csproj (e.g. Themes\OfficeBlack\Themes and Themes\OfficeBlack\Themes\Office\Black)
• Build the custom theme as I previously explained. Please note, that you need to make the changes to RadTimeline styles in the Telerik.Windows.Controls.DataVisualization.xaml file.

Kind regards,
Tsvetie
the Telerik team

[Barry]

Ok, so I did what you suggested with the copying the new xaml files into the old theme solution and editing datavisualization.xaml... but now the colors on the items in the timeline are gone!

Where did they go?

Also, there are a number of things that aren't in the Q1 2012 SL4 dlls that are in the SL5 dlls. I had to remove the IsBusy on the GridView because it doesn't exist in the SL4 dlls, also the filter stuff on the GridView relies on FilterOperatorToFilterEditorIsEnabledConverter, which does not exist in the SL4 dlls - I had to remove that too and now I have to hard-code whether I want those filters to show or not. These are things that I have found so far... who knows what other things will come up missing when I try to use other controls with this theme.

I don't understand why you guys want to try to force people to use SL5 by not supporting SL4 anymore. Don't you realize that some people CAN'T use SL5? Believe me I would love to use SL5, but my users don't have it because it is not authorized and will probably be years before it is approved and installed on all of their computers. I'm glad that Telerik is quick to adopt the latest technology, but at the same time sickened by the fact that you abandon the old stuff so quickly. I NEED support for SL4!! By support I mean I need the latest SL4 source code and a theme solution with SL4-only references. 

[Barry]

Now that I have a somewhat useable vertical scrollbar on the timeline I'm working on a template item selector. I have managed to get it to work despite the fact that the information in this link is incorrect: Customizing Items

In the customizing example that shows how to implement the template selector you're supposed to add a property to your viewmodel called CustomItemTemplateSelector that the example doesn't actually do anything with.

Binding your template selector to the static resource "ItemTemplateSelector" like this does not do anything:

ItemTemplateSelector="{StaticResource ItemTemplateSelector}"

You have to bind it to the property "CustomItemTemplateSelector" in your viewmodel like this in order for the CustomItemTemplateSelector class to be hit at all:

ItemTemplateSelector="{Binding CustomItemTemplateSelector}"

Why create a property if you're not going to use it? Also, naming the class and the property the same thing just confuses things.

This statement in the example is wrong as well:

"Now in XAML you may create an instance of the CustomItemTemplateSelector class, set the DataTemplates and provide it to the ItemTemplateSelector property:"

You have to provide the instance of the CustomItemTemplateSelector class to the CustomItemTemplateSelector  property in the ViewModel - same names make it confusing right?

And then in order for it to work you have to bind that property to the item template selector in the timeline...

You might wan to fix that.

[Barry]

About the timeline items...

1. Is there a way to get them to keep from bunching up and stack on top of each other instead?

Instead of this: item1em2em3 (item 1, item 2, item 3 overlapping)
have it look like this:
item1
  item2
    item2

2. Is there a way to prevent items that have short durations from disappearing when the timeline is zoomed out too far? If you have an item that has a duration of less than a day (or something like that) and you zoom out to view a period of over a year that item disappears.

I know that the timeline was designed in a certain way that may not conform to what I need it to do, but these are things that my boss is asking for... he always wants things to do stuff they're not designed to do.

[Tsvetie]

Hi Barry,

Straight to your questions:

1. From the information that you provided, I understand that you decided to use the custom theme approach and not the implicit styles one. Please correct me if I am wrong. I just want to point out that with the implicit styles approach, you have to work only with the style of the timeline as opposed to building a custom theme for all controls.
   Now, getting back to the custom theme - when I tested the approach on my end, I was able to create a custom theme for the timeline with no problems. That is why, I cannot be sure what could be causing the colors to disappear from the timeline. Basically, as you are using the 2012.1 326 version and the XAML for the 2012.1 326 you should not have the described problems, in case you simply added a scrollViewer to the timeline template. I have seen the problem with the converter in some cases, but in case you use the XAML namespaces from the XAML file as they are, you should not have problems with the converter. In case you continue to have problems with this, please open a formal support ticket and send us the custom theme.
2. Thank you for the note about the help topic. Basically, you do not need the CustomItemTemplateSelector property of the viewmodel at all - we will remove this from the topic. You can simply set the ItemTemplateSelector property of the timeline to: 

   ItemTemplateSelector="{StaticResource ItemTemplateSelector}"

3. Regarding the overlapping of the items - you should be able to reproduce this only with instant items, please correct me if I am wrong. And in short - no this cannot be changed. The reason for that is that an instant item represents a single point on the timeline, but it is represented by an element with fixed width and height and not a small point. Additionally the zoom level varies. Take into account the following situation - the timeline is currently showing one month and five instant items that do not overlap. In case you zoom out to a year, these items will now overlap. So, lets decide to put them on different rows. Even if items do not overlap when you display the whole year, they most probably will, when you show fifty years. So, in order to cover all cases, we will have to display every instant item on a different row. This, however, will look strange when you zoom in to a month. And in my opinion, rearranging the items when the user changes the zoom level is not very user-friendly. I will appreciate your feedback on the matter - how do you expect the timeline to behave in this case?
4. Items with duration on the other hand, are represented on the timeline based on their exact start date and end date. As a result, in case the difference between the start date point and end date point on the timeline is small enough, you will not see the item. In case you decide to implement a MinWidth for the items with duration, you will run into the same problem as with the instant items - overlapping. Additionally, I think it will be misleading to users, when they visually compare an item with MinWidth (representing a day) and an item with MinWidth (representing a month).

Regards,
Tsvetie
the Telerik team

[Johannes]

I am wondering how did you assign the custom style to the RadTimeline. 
I tried using Expression Blend (Edit Template --> Edit a Copy) but that doesn't work.
I've also tried to make a custom theme, but also having problems with that approach as described in my post here: http://www.telerik.com/community/forums/wpf/timeline/custom-theme-for-radtimeline.aspx#2159569 

Maybe you could post me the code, how you assigned the new style to your RadTimeline control?
That would help me a lot.

[Tsvetie]

Hello Johannes,

Please refer to the forum thread that you referenced for information on the problem with Expression Blend, custom theme and implicit styles.

Regards,
Tsvetie
the Telerik team