Scrolling the timeline

5 posts, 0 answers
  1. John
    John avatar
    28 posts
    Member since:
    Sep 2013

    Posted 05 Jan 2015 Link to this post

    Hi,
    How can I scroll the timeline programmatically.  When I click on an item in the list I want to make the  item in the timeline visible.
    Thanks,
    John
  2.
  3. Hristo
    Admin
    Hristo avatar
    1517 posts

    Posted 08 Jan 2015 Link to this post

    Hi John,

    Thank you for writing.

    To achieve a functionality as described in your request, you would need to subscribe to the SelectedItemChanged event and in the handler scroll the timeline to the date of the selected item:
    private void radGanttView1_SelectedItemChanged(object sender, GanttViewSelectedItemChangedEventArgs e)
    {
        var dateToScroll = e.Item.Start;
        this.radGanttView1.GanttViewElement.GraphicalViewElement.ScrollTo(dateToScroll);
    }

    Further looking into your case I encountered a bug which I logged into our feedback portal. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - feedback item.

    This bug would make your application throw an ArgumentOutOfRangeException when you click on a data item and you want to scroll the timeline so that this item becomes visible. Please have in mind that this issue would only appear for data items with a starting date close to the TimelineStart date.

    The possible workaround is to create a CustomGanttView, CustomGanttViewElement and CustomGanttViewGraphicalViewElement where you should override the ScrollTo method. Please find below a code snippet with a sample implementation:
    public class CustomGanttViewGraphicalViewElement : GanttViewGraphicalViewElement
    {
     
        public CustomGanttViewGraphicalViewElement(RadGanttViewElement ganttView)
            : base(ganttView)
        { }
     
        protected override Type ThemeEffectiveType
        {
            get { return typeof(GanttViewGraphicalViewElement); }
        }
     
        public override bool ScrollTo(DateTime dateTime)
        {
            if (dateTime < this.TimelineBehavior.AdjustedTimelineStart || dateTime > this.TimelineBehavior.AdjustedTimelineEnd)
            {
                return false;
            }
     
            float halfViewWidth = (float)this.ViewElement.Size.Width / 2f;
            float x = (float)((dateTime - this.TimelineBehavior.AdjustedTimelineStart).TotalSeconds / this.OnePixelTime.TotalSeconds);
            x -= halfViewWidth;
     
            if (x < 0)
            {
                this.TimelineScroller.Scrollbar.Value = this.TimelineScroller.Scrollbar.Minimum;
            }
            else if (x > this.TimelineScroller.Scrollbar.Maximum)
            {
                this.TimelineScroller.Scrollbar.Value = this.TimelineScroller.Scrollbar.Maximum - this.TimelineScroller.Scrollbar.LargeChange;
            }
            else
            {
                this.TimelineScroller.Scrollbar.Value = (int)x;
            }
     
            return true;
        }
    }
    public class CustomGanttViewElement : RadGanttViewElement
    {
        protected override GanttViewGraphicalViewElement CreateGraphicalViewElement(RadGanttViewElement ganttView)
        {
            return new CustomGanttViewGraphicalViewElement(this);
        }
     
        protected override Type ThemeEffectiveType
        {
            get { return typeof(RadGanttViewElement); }
        }
    }
    public class CustomGanttView : RadGanttView
    {
        protected override RadGanttViewElement CreateGanttViewElement()
        {
            return new CustomGanttViewElement();
        }
     
        public override string ThemeClassName
        {
            get { return typeof(RadGanttView).FullName; }
        }
    }

    I hope that this information is useful. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. John
    John avatar
    28 posts
    Member since:
    Sep 2013

    Posted 12 Jan 2015 in reply to Hristo Link to this post

    Hristo,

    I have not been able to log into the foruns for several days so I will try replying by email….

    Thanks Hristo,

    I had actually tried ScrollTo() before writing and was encountering the error - which your workaround fixed  Thanks!.   One more questions – I only want to scroll if the Graphical view element is not already completely visible.  How can I test for this?  Currently it scrolls  even when the element is already fully visible.

    Thanks ,

    John

  7. Hristo
    Admin
    Hristo avatar
    1517 posts

    Posted 15 Jan 2015 Link to this post

    Hello John,

    Thank you for writing back.

    In order to scroll only to items which are not visible or not completely visible you should slightly modify the contents of the SelectedItemChanged event to which you subscribed last time. Please see my code snippet below:
    private void radGanttView1_SelectedItemChanged(object sender, GanttViewSelectedItemChangedEventArgs e)
    {
        foreach (GanttGraphicalViewBaseItemElement item in this.radGanttView1.GanttViewElement.GraphicalViewElement.Children.First().Children)
        {
            if (item != null && e.Item == item.Data)
            {
                Rectangle bounds = item.TaskElement.ControlBoundingRectangle;
     
                if (!this.radGanttView1.GanttViewElement.GraphicalViewElement.ControlBoundingRectangle.Contains(bounds))
                {
                    var scrollBarValue = this.radGanttView1.GanttViewElement.GraphicalViewElement.HorizontalScrollBarElement.Value;
                    var dateToScroll = e.Item.Start;
                    this.radGanttView1.GanttViewElement.GraphicalViewElement.ScrollTo(dateToScroll);
                }
            }
        }
    }

    I am also sending you a .gif showing the behavior of the control on my side.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. John
    John avatar
    28 posts
    Member since:
    Sep 2013

    Posted 15 Jan 2015 in reply to Hristo Link to this post

    Thanks Hristo - Works great!
Back to Top