Setting RadTimeBar PeriodStart from code-behind

[Brian]

I'm using a RadTimeBar that only displays 24 hours of data at a time. Below is a sample application to reproduce the issue I'm having:

namespace TimelineTest
{
    public partial class MainWindow : Window
    {
        private List<Item> items = new List<Item>();
        public MainWindow()
        {
            InitializeComponent();

            items.Add(new Item() { Date = new DateTime(2014, 5, 5), Duration = TimeSpan.FromHours(5) });
            items.Add(new Item() { Date = new DateTime(2014, 5, 5, 14, 18, 22), Duration = TimeSpan.FromHours(5) });

            timeline.ItemsSource = items;
        }

        public class Item
        {
            public TimeSpan Duration { get; set; }
            public DateTime Date { get; set; }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            DateTime now = DateTime.Now;
            timebar.PeriodStart = new DateTime(now.Year, now.Month, now.Day, 0, 0, 0);
            timebar.PeriodEnd = new DateTime(now.Year, now.Month, now.Day, 23, 59, 59);
        }
    }
}

And the XAML:

<Window x:Class="TimelineTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadTimeBar Name="timebar" Height="64" Margin="10,0,10,193" PeriodStart="5/5/2014 00:00:00" PeriodEnd="05/5/2014 23:59:59" VerticalAlignment="Bottom" MaxSelectionRange="0:0:10" MinSelectionRange="0:0:10" SelectionTitleFormatString="{}{0:MM-dd-yy  HH:mm:ss}">
            <telerik:RadTimeBar.Intervals>
                <telerik:HourInterval IntervalSpans="1,4"/>
                <telerik:MinuteInterval IntervalSpans="1,5,15,30"/>
            </telerik:RadTimeBar.Intervals>
            <telerik:RadTimeBar.Content>
                <telerik:RadTimeline Name="timeline" Margin="0, -65, 0, 0" PeriodStart="{Binding PeriodStart, ElementName=timebar}" PeriodEnd="{Binding PeriodEnd, ElementName=timebar}" telerik:StyleManager.Theme="Windows8Touch" StartPath="Date" DurationPath="Duration" ScrollMode="None">
                    <telerik:RadTimeline.Intervals>
                        <telerik:DayInterval IntervalSpans="1"/>
                    </telerik:RadTimeline.Intervals>
                </telerik:RadTimeline>
            </telerik:RadTimeBar.Content>
        </telerik:RadTimeBar>
        <Button Content="Button" HorizontalAlignment="Left" Margin="125,230,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    </Grid>
</Window>

On the initial load, all works fine. In the scroller at the bottom, you can re-size the selection as normal (dragging on each size of the scroll bar), and it won't let you zoom too far in.

But I have to be able to change the period on the fly. I have a datePicker that allows the user to change the date for the data in the timebar. So I need to change the 'PeriodStart' and 'PeriodEnd' from code-behind. In the example above, I just hard-coded it in a button click. After I do this, it seems as if you can zoom in infinitely and the application eventually crashes with an overflow exception "Arithmetic operation resulted in an overflow". Sometimes, it throws the exception immediately after zooming in too far. Sometimes you have to drag/zoom in and out a few times.

Is there another way to change 'PeriodStart' and 'PeriodEnd' after it is initially loaded? Or is there a way to 're-initialize' the control after changing the period properties, so that you can't zoom in infinitely?

[Martin Ivanov]

Hello Brian,

Thank you for the provided code.

I was not able to reproduce the exception, however I reproduce infinity zoom that you mentioned and I can confirm this is a bug in the RadTimeBar. I logged it in our feedback portal where you can track its status. In addition I updated your Telerik points as a small compensation for the inconvenience caused.

As a workaround you can set the MinZoomRange property of the RadTimeBar after you change the start/end periods.

private void Button_Click(object sender, RoutedEventArgs e)
{
    DateTime now = DateTime.Now;
    timebar.PeriodStart = new DateTime(now.Year, now.Month, now.Day, 0, 0, 0);
    timebar.PeriodEnd = new DateTime(now.Year, now.Month, now.Day, 23, 59, 59);
    timebar.MinZoomRange = TimeSpan.FromHours(2);
    timebar.MinZoomRange = TimeSpan.FromHours(1);
}

Note that in the code snippet I am setting the MinZoomRange twice.

Also, I noted that you are using RadTimeline in the RadTimebar. Please keep in mind that the timeline is derived from the timebar and they are pretty similar controls. The main difference is that the timeline can have items which can be selected and grouped, while the timebar doesn't have items in it and you can select periods. So in case you do not need the selection thumb in timebar you can use only the RadTimeline control. You can also take a look at the Timeline Selection help article.

Regards,
Martin
Telerik

 

 

[Brian]

Thanks for the support. We ideally needed some features of the timebar and some features of the timeline. Basically, the timeline was exactly what we wanted, but we needed the ability to select a period (or specific point) of the timeline, and not individual items that were added to the timeline. So luckily, we were able to somewhat achieve our goal by embedding the timeline in the timebar. Is there another way to achieve this with only the timeline? Did I overlook something?

About the MinZoomRange, that did fix the issue for me. But I don't understand why you set the MinZoomRange twice. I tested it with setting it once and it seemed to work okay. Is the a reason for that?

Thanks again for your help,
Brian Moore

[Brian]

Also, I noticed where I can use:

timebar.MinZoomRange = new TimeSpan();

and that seems to fix the zoom issue. Is that okay, or is there a potential issue with that?

[Martin Ivanov]

Hello Brian,

Thank you for the explanation. Now I understand your scenario better and I can say that this is the right approach.

As for the MinZoomRange property - it is set twice because when you click the Button which changes the property, the MinZoomRange will be set (for example: to 1)  and the OnMinZoomRangePropertyChangedCallback will be triggered. Then the MinZoomRange will be applied to the TimeBar. When you click the button for second time, the MinZoomRange will be set again to the same value (1) and the logic for setting the property will check if the new passed value equals to the old one. If so, the property changed callback won't be called and the zoom range won't be applied. 

Regards,
Martin
Telerik

 

 

[Brian]

That's what I was thinking, but when I ran it the first time without setting MinZoomRange twice, it seemed to still work okay. Maybe I didn't click the button twice like I thought...

Anyways, thanks a lot for your help.