Timeline Options

[Tom Lynch]

I have an ancient timeline component that I'm looking to replace.  Could anyone tell me if it's possible to configure the scheduler's timeline view to do the following things (or at least get close to doing so).  Please refer to the attached timeline.png file for an example:

1.  When I group by date and a 2nd option, can the 2nd option be listed vertically down the left side of the timeline.  If you refer to my attached image you'll see the events are grouped by the date horizontally along the top and then grouped by two options on the left side, so each member of the 2nd option has it's own lane for events.  All the examples I've seen of the Telerik timeline puts both groups (date and 2nd option) at the top, so it looks impossible to stretch multi-day events across the timeline because each 2nd option is displayed as a vertical column.

2.  Following on from the last sentence, I want to be able to stretch a multi-day event across the timeline as needed even when I'm grouping by two groups.  I've seen you can do that in Telerik's timeline when there's only one group.

3.  Apply colors to each event marker on the timeline that correspond with some property of the event.

4.  Not shown in my attached image, but also desired is the ability to display more information about the event when I click on the event in the timeline.  My current timeline displays a hidden DIV filled with further details right on the timeline next to the event. 

Thanks,

Tom

[Bozhidar]

Hi,

I'll get straight to the questions:

1. The described look is supported by the Scheduler control out of the box, and you can see it in the following demo:
http://demos.telerik.com/aspnet-ajax/scheduler/examples/resourcegrouping/defaultcs.aspx

The control has a GroupingDirection property, that's set to Horizontal by default. To achieve the desired look you just have to set it to Vertical, as shown in the following screenshot:
http://screencast.com/t/u82BeVdvVR

2. In the Vertical grouped view the appointments do span across the timeslots horizontally.

3. The demo shows how you can set color to the appointments based on their resource. If you want to further customize individual appointments, you can use the AppointmentCreated event to set a different class to the appointment based on a value from the appointment. Then use CSS to change the appearance. This is demonstrated in the following help article:
http://www.telerik.com/help/aspnet-ajax/scheduler-appointmentcreated.html

4. You can use the following demo as a source of inspiration in achieving your requirement:
http://demos.telerik.com/aspnet-ajax/scheduler/examples/radtooltip/defaultcs.aspx

Regards,
Bozhidar
Telerik

 

 

[Tom Lynch]

Thank you, Bozhidar!  This looks very promising.