Scrolling the timeline

[John]

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

[Hristo]

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

 

 

[John]

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

[Hristo]

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

 

 

[John]

Thanks Hristo - Works great!