How to display selected date range on TimeBar slider move?

11 posts, 1 answers
  1. Pushpendra
    Pushpendra avatar
    32 posts
    Member since:
    Nov 2012

    Posted 19 Jun 2013 Link to this post

    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");
    }
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Jun 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Pushpendra
    Pushpendra avatar
    32 posts
    Member since:
    Nov 2012

    Posted 24 Jun 2013 Link to this post

    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
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Jun 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Michael
    Michael avatar
    1 posts
    Member since:
    Apr 2015

    Posted 20 Apr 2015 Link to this post

    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?

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 23 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. michael
    michael avatar
    3 posts
    Member since:
    Jan 2015

    Posted 23 Apr 2015 in reply to Martin Link to this post

    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!

  9. michael
    michael avatar
    3 posts
    Member since:
    Jan 2015

    Posted 05 May 2015 Link to this post

    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?

  10. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 08 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  11. michael
    michael avatar
    3 posts
    Member since:
    Jan 2015

    Posted 08 May 2015 in reply to Petar Marchev Link to this post

    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

  12. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 12 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
DevCraft banner