This is a migrated thread and some comments may be shown as answers.

Synchronised scrolling of two instances of Scheduleview control

8 Answers 240 Views
ScheduleView
This is a migrated thread and some comments may be shown as answers.
Myles
Top achievements
Rank 1
Myles asked on 02 Jul 2012, 03:19 PM
I have two instances of the ScheduleView control on one page ( a bit like this demo: http://demos.telerik.com/silverlight/#ScheduleView/Grouping/Basics).  Is there a way to synchronise the vertial scrolling of both controls e.g. Control 2 automatically scrolls vertically as Control 1 scrolls vertically.  The page I am developing allows the user to compare two sets of daily appointments.  It would be really useful if both calendars scrolled together.

Regards

Myles

8 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 05 Jul 2012, 12:19 PM
Hi Myles,

Thank you for contacting us.

I am afraid that we're not aware of a way to synchronize the scrolling of two ScheduleView instances. RadScheduleView provides methods only to scroll to certain appointment or slot and to a certain time - ScrollIntoView, ScrollTimeRuler.

Greetings,
Yana
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Thomas
Top achievements
Rank 2
answered on 26 Mar 2013, 12:46 PM
In case others are looking for a solution to this, I've just tried a solution which seems to work. 2 steps:

1) Initialize both ScheduleViews to the same date/time:

// Sync the two timelines initially.
this.timelineCandidates.CurrentDate = this.timelineJobs.CurrentDate;
this.timelineCandidates.ScrollTimeRuler(this.timelineJobs.FirstVisibleTime, true);

2) Keep the two in sync by using the LayoutUpdated event of one of the views (in my case, I have hidden the horizontal scrollbar entirely from the top view, so the bottom view should keep the top view in sync when scrolling):

private void timelineCandidates_LayoutUpdated(object sender, EventArgs e)
{
   // This will keep timelineJobs in sync with timelineCandidates.
   timelineJobs.ScrollTimeRuler(timelineCandidates.FirstVisibleTime, true);
}
0
Jiri
Top achievements
Rank 1
answered on 15 Dec 2014, 01:42 PM
Hi Thomas,

This was my case, works well, thank you!

Cheers
0
Robert
Top achievements
Rank 1
answered on 06 Feb 2017, 09:36 AM

I have a similar requirement - 2 timelines on the one page.  I want to have one horizontal scroll bar to control the scrolling and zooming of both timelines in sync with each other.  I also want the time ruler portion of the bottom timeline to disappear so it appears that there are two sets of data being controlled by one horizontal scroll bar.  Also the scroll bar of the top timeline is be hidden.

Thanks.

Rob

0
Nasko
Telerik team
answered on 08 Feb 2017, 08:39 AM
Hi Robert,

Could you please, let us know if you questions is related to RadTimeLine or is about RadScheduleView? Using that information we will try to provide you with an appropriate solution in order to achieve the desired behavior and functionality.

We are looking forward to hearing from you.

Regards,
Nasko
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert
Top achievements
Rank 1
answered on 08 Feb 2017, 11:29 AM

Hi Nasko.  I got a good reply from a support request #1088568.  The issue was with synchronising multiple timelines.  The solution was to bind the start, end, visible and actual visible periods from one timeline to the others - this kept the timelines in sync as the window was resized or when the scroll bar zoomed or panned over the data.  This, coupled with hiding some of the template components resulted in a solution which is almost working.

The response sent to me is as follows:

There is not built-in mechanism that will allow you to easily align the timeline controls. However, you should be able to do it with some custom code. For example, you can sync the ranges of the timeline using the PeriodStart, PeriodEnd, VisiblePeriodStart, VisiblePeriodEnd and ActualVisibleRange properties.

To hide the horizontal scrollbar you can set the ScrollMode property to None. Or you can use the SliderStyle property if you prefer.

To hide the periods and the group periods at the top of the control you will need to modify some styles. You can extract the RadTimeline ControlTemplate. Then find the TimelineGroupPeriodContainer and TimelinePeriodContainer controls and set their Visibility to Collapsed. You can also hide the gray border that separates the periods and the groups periods. To do this you can set the Visibility of one of the Border element from timeline template. The border is a child of the first Grid which is a child of the TimelineAnnotationsPanel. The attached image demonstrates where the elements are positioned in the hierarchy.

Additionally, I attached a small example demonstrating how you can customize the timeline control. Instead of extracting the template, the example uses an attached property and gets the timeline containers in code. Note that the approach demonstrated in the project is merely a suggestion which is not well tested and I cannot guarantee that it will work properly in all expected scenarios. This is why I recommend you to use it only as a reference for implement your own solution.

0
Nasko
Telerik team
answered on 09 Feb 2017, 11:30 AM
Hello Robert,

I am glad to here that you were able to achieve the desired and thank you for sharing with the community the suggested approach.

If you have any additional questions or concerns please, do not hesitate to contact us.

Regards,
Nasko
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Simon
Top achievements
Rank 1
Iron
answered on 13 Feb 2024, 02:34 PM

Hello fella devs,

I know this thread is twelve years old, but in case someone googles this (like I did): The easiest way to sync two ScheduleViews is to bind the FirstVisibleTime property like this:

FirstVisibleTime="{Binding FirstVisibleTime, ElementName=OtherScheduleView, Mode=TwoWay}"

Works like a charm and you don't have to use LayoutUpdated, which is called very often.

Regards,
Simon

Tags
ScheduleView
Asked by
Myles
Top achievements
Rank 1
Answers by
Yana
Telerik team
Thomas
Top achievements
Rank 2
Jiri
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Nasko
Telerik team
Simon
Top achievements
Rank 1
Iron
Share this question
or