How to display selected date range on TimeBar slider move?

[Pushpendra]

Hi,

I am using RadControls for Silverlight Q2 2011 SP1. I have to perform following task on RadTimeBar:

1. On mouse move show start and end date of highlighted interval.
2. While moving TimeBar slider show start and end date selected by slider or selected by SnapToInterval selection bar.

I am able to achieve both scenarios separately, but not getting results at the same time. I am getting first result by using "e.HoveredPeriodRange.Value" of HoveredPeriodChanged event and second result by using MouseMove event and taking senders ActualSelectionStart and ActualSelectionEnd dates.

Please let me know how can I achieve both functionalities at the same time.
Please find the attached image and code for further reference.

Thanks,
Pushpendra

private void YearTimeBar_HoveredPeriodChanged(object sender, Telerik.Windows.Controls.TimeBar.HoveredPeriodEventArgs e)
{
    if (e.HoveredPeriodRange != null)
    {
        DisplaySelectionStartDate = e.HoveredPeriodRange.Value.Start.ToString("dd-MMM-yyyy");
        DisplaySelectionEndDate = e.HoveredPeriodRange.Value.End.ToString("dd-MMM-yyyy");
    }
}

private void YearTimeBar_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    DisplaySelectionStartDate = ((Telerik.Windows.Controls.RadTimeBar)sender).ActualSelectionStart.ToString("dd-MMM-yyyy");
    DisplaySelectionEndDate = ((Telerik.Windows.Controls.RadTimeBar)sender).ActualSelectionEnd.ToString("dd-MMM-yyyy");
}

[Tsvetie]

Hi Pushpendra,

You can use only the MouseMove event and check the OriginalSource to see if you are over the selection thumb or not. For example:

private void YearTimeBar_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    RadTimeBar timeBar = sender as RadTimeBar;

    if (e.OriginalSource is Telerik.Windows.Controls.TimeBar.ItemContainer)
    {
        DisplaySelectionStartDate = timeBar.HoveredPeriod.Value.Start.ToString("dd-MMM-yyyy");
        DisplaySelectionEndDate = timeBar.HoveredPeriod.Value.End.ToString("dd-MMM-yyyy");
    }
    else
    {

        foreach (UIElement parent in (e.OriginalSource as UIElement).GetParents())
        {
            if (parent is Telerik.Windows.Controls.TimeBar.SelectionThumb)
            {
                DisplaySelectionStartDate = ((Telerik.Windows.Controls.RadTimeBar)sender).ActualSelectionStart.ToString("dd-MMM-yyyy");
                DisplaySelectionEndDate = ((Telerik.Windows.Controls.RadTimeBar)sender).ActualSelectionEnd.ToString("dd-MMM-yyyy");
                break;
            }

            if (parent is Telerik.Windows.Controls.TimeBar.ItemControl || parent is Telerik.Windows.Controls.TimeBar.ItemContainer)
            {
                DisplaySelectionStartDate = timeBar.HoveredPeriod.Value.Start.ToString("dd-MMM-yyyy");
                DisplaySelectionEndDate = timeBar.HoveredPeriod.Value.End.ToString("dd-MMM-yyyy");
                break;
            }
        }
    }
}

Regards,
Tsvetie
Telerik

[Pushpendra]

Hi Tsvetie,

Thanks for the solution, it is working fine.
There is one more requirement, can we display the date range in a control that behaves or looks like Tool Tip but it should be always visible.

Regards,
Pushpendra

[Tsvetie]

Hello Pushpendra,

RadTimeBar for Silverlight does not offer such functionality out of the box and you need to implement it yourself. Depending on your concrete requirements, you can use RadWindow or RadDocking for your implementation, for example.

Regards,
Tsvetie
Telerik

[Michael]

Hello.

 

thanks for the helpful posts...one question.  I am using the RadTimeBar and need to calculate the date range a user selects when moving either the period start or period end.  I would like to, upon user changing the period end or start, calculate the selected date range in days.  Suggestions?

[Martin Ivanov]

Hello Michael,

You can get the data range that the user selects through the Selection property of RadTimeBar, which is of type Telerik.Windows.Controls.SelectionRange<System.DateTime>. Or you can use the System.DateTime properties SelectionStart and SelectionEnd.

About getting the range in days you can use the Selection to calculate them. Here is an example:

var selection = this.timeBar.Selection;
TimeSpan timeRange  = selection.End - selection.Start;
var days = timeRange.TotalDays;

You can do that in the SelectionChanged event handler of the timbebar. Or when you change the period end and start of the control.

I hope this is helpful.

Regards,
Martin
Telerik

 

 

[michael]

THANK YOU THANK YOU THANK YOU!!!

 As a noob to Telerik I need all the help I can get and your answer was spot on!

[michael]

Martin,

 

May i ask you one more question?

 

On my TimeBar slider I have data such as Cycles and Loads (shipment data) and would like to extract the range selected by the user.  For example on a TimeBar slider with a range of 1-10 if the user slides the left most slider to 2 and the right most slider to 8 then I would like to capture that the user selected 2-8.

 

Suggestions?

[Petar Marchev]

Hello Michael,

Have you tried using the VisiblePeriodStart and VisiblePeriodEnd properties? They correspond to the start and end values of the slider.

Regards,
Petar Marchev
Telerik

 

 

[michael]

Petar,

 

Thanks for your quick reply, maybe I did not make myself clear with my last post.

 

My timebar contains data, loads corresponding to when the load was transported, which is added using the radTimeline.ItemSource add feature.  This load data is what I am looking for.  When I use the Visible Period the result is simply the view window date range on screen, not the data embedded in the window.

 

Thanks

[Petar Marchev]

Hello Michael,

So you appear to be looking for the items inside the viewport, is that it?

There is no property that contains these items, so you can simply iterate your items source and get the items that are within the visible part of the timeline. Let me know if this is indeed what you are looking for.

Regards,
Petar Marchev
Telerik