Update the Intervals on the fly

[Aleksandar Stefanov]

Hi,

Because of zoom limitation (30,000px) we are facing a question of how to dynamically change the intervals in order to display the units according to the depth of the zoom. So maybe when the zoom event is fired via mouse or wheel to recalculate the timeline visible bounds and flush the initial intervals and set new more granular ones? Is that possible and how so?

Also, is there any notion of a track in the timeline - from my experiments you cannot force sets of events on a new line (simulating tracks) but wanted to confirm?

We need to add collections of events or events with duration on individual rows thus showing any possible overlapping and have to calculate the start and end time of the timeline dynamically. Any suggestions or hindrances down the road we can know from now would be greatly appreciated.

Thanks,

Aleks

PS
(I haven't found your full documenation yet with examples of C# creating the RadTimeline etc in code so excuse my unpreparedness)

[Tsvetie]

Hi Aleks,

Straight to your questions:

1. You can update the Intervals collection dynamically, but this will not fix the problem with the 30 000 pixels limitation. Basically, the idea is that the width of the content should not exceed 30 000 pixels and this is not connected to the current intervals of the timeline control. The current width of the content depends only on the whole period and the current zoom level.
2. You cannot directly specify the row in which a timeline item is visualized. However, there are two ways to change the way the items are positioned in the timeline:
   1. Set AutoSort="False". By default, the timeline sorts the items first by start date and then by duration. Once ordered, they are positioned in the highest possible row of the timeline. Setting the AutoSort property to "false" would switch off this default initial sorting of the items. This is demonstrated in our First Look demo.
   2. Use grouping. In case you do not need the headers of the groups, you can hide them. Please refer to our Grouping demo for a reference.
3. I could not quite understand the result that you are after, so in case the information below does not answer your question, please explain in detail what you are trying to achieve. Basically, in case you want all events in a certain group to be displayed in the same row, even if they overlap - no, this is not possible. The timeline control does not offer a way to let its items overlap and I hope you would agree with me that there are cases, in which this might lead to misleading the user. For example, in case you have an event of 1 day, displayed behind an event of 7 days, the user will never know about the existence of the first event. Apart for overlapping events, I think you can use the grouping functionality in your case.
   On the other hand, in case you want to visualize a section of an event in different color, you do not need overlapping events to do this. You can use a custom template for the timeline items as demonstrates in our First Look demo.

Here are links to our online demos and documentation.

All the best,
Tsvetie
the Telerik team

[Aleksandar Stefanov]

Zdrasti Zsvetie,

So I'll try to explain it better and I have a basic sketch but basically for the last question of what we are trying to build - we need a timeline that can have multiple rows (tracks) which can contain both Event Points and Durations on each row (i.e. images and video clips). Each row of events and durations needs to be clearly grouped and identified by specific color so you know this is Track 1,2, etc ( EDIT: I see the grouping works good but is there a way to style the group row? ) So we are fetching these events and building an EventCollection that we then need to assign/append it to the Timeline. Each Event Collection will be a single track. Those event points must be clickable or you need to able to step in with the arrow keys, The collection could be updated and need to refresh that row etc - it gets more and more complex (e.g. notice the red cursor like a player mark). Most of it seems doable - the idea is a simple visualization of event points and durations for tracks and the part you misunderstood me is that having them on a timeline control will show any possible track overlappings.. meaning track 1 could be 5min . track 2 - 8 min but have a start date in the middle of track 2, like in the presidents demo.

Please see my drawing. If you know for sure what cant be done, let me know.

EDIT: I saw your comment on another thread that we can remove the 30,000px limitation by editing the source code. When we purchase the RadControls for Silverlight - it includes the source in the download?

An alternative to removing the limit we thought of is to control the repainting or reinitialization of the timeline (and its tracks) from an custom external slider/zoombar that will do the custom zooming we want? So as you slide a slider control, it will filter the collection(s), then reassign it back to the timeline, add/remove some intervals, etc. Does this make sense?


Mersi,

Aleks

[Aleksandar Stefanov]

Hi,

We purchased the RadControls for SL and were able to find the location of the 30000 in the Source Code (VirtualWidthLimit in TimeBarBase) and we see that this value is being used for the calculation of the visual minimum zoom range in 100-nanosecond units and it's not related directly to the actual size in pixels.

We would like to understand exactly what " limitation in the Silverlight Framework " ( version ? ) are you referring to in this ticket and why?

Thanks.

[Tsvetie]

Hello Aleks,

The minimum zoom level, determines the maximum possible size of the content element. The code that you talk about makes sure that the minimum zoom level has such a value, so that the content element will not become more that 30 000 pixels wide. 

The reason why we have enforced this constraint, is because in Silverlight, there are some rendering problems, when an element becomes so wide. You can easily reproduce this problem without our control. For example:

<Rectangle Width="100" Height="10" Fill="Red" />
<Rectangle  Width="36000" Height="10" Fill="Red" />

Regards,
Tsvetie
the Telerik team

[Aleksandar Stefanov]

Hi Tsvetie,

It still doesn't answer my question what the relationship between this denominator value and the minimum zoom range in ticks is. The content element doesn't change its size, and also I can't imagine the situation when the element's size could be bigger than actual screen resolution. According to our experiments, this VirtualWidthLimit value just prevents user from zooming too deep (like from years or months down to the seconds) and it's only used for calculation of the minimum visible interval on the timeline and it's not used for the rendering purposes, so my question is still open.

Thanks,
Aleks

[Evgenia]

Hi Aleks,

In case you are interested in how exactly the MinZoomRange value influences the size of the content, you can review the code in the TimeBarContentPanel class. In particular, check the MeasureOverride and the ArrangeOverride methods of this panel. Basically, the actual size of the ContentPresenter depends on the current visible period range, which in turn depends on the value of the MinZoomRange property. This behavior has one exception - in case you have only one RadSparkline control as content for the timeBar, because of the way the two controls are integrated.

You can use tools such as Silverlight Spy in order to inspect the XAML of the control in this online as well.

All the best,
Tsvetie
the Telerik team