Events not being redrawn after jumping to date in timeline

Scheduler Javascript
#1

I have a dropdownlist which is populated with the events for the timeline. I want to be able to have the user select an event from the drop down list and then have the timeline jump to the event within the timeline.

Here is the very simple js code which accomplishes this:

function dothis(obj) {
var d = new Date(Date.parse($(obj).val()));
scheduler.setCurrentView(d, “timeline”);
}

The problem:

The selected event does not appear to be redrawn in the timeline when jumping to it using this method:

Here is the timeline before the selection:

I select “milestone” 2 in the list which should cause the timeline to “jump” to the milestone’s date in the timeline which is June 29, 2010. This is the result:

Now i have noticed if you use the built in navigation buttons for the timeline to jump from one week to the next, the events do get drawn properly on their respective dates.

Any help would be appreciated.

Cheers,

Pipes

#2

This is very strange, because default navigation buttons are using exactly the same command, they call setCurrentView

Are you using dynamic data loading ?
Try to change your code as

scheduler.setCurrentView(d);

in such case component will preserve existing view , basically your existing code is correct as well, but this is the only difference from built-in buttons navigation.

#3

Stanislav,

Unfortunately your suggestion did not work. The timeline still fails to redraw the event. Am I able to reinit the scheduler array which contains the events? So pseudo-code:

  1. Jump to date in timeline.
  2. Clear the events
  3. Reinit the scheduler event array
  4. Redraw events?

Any help you could give would be appreciated.

Cheers,

Chris…

#4

2. Clear the events 3. Reinit the scheduler event array 4. Redraw events?

In scheduler 2.2 you can use export data to json , clear all events, and load them back from json object.

Still I’m not sure why is problem occurs in the first place.
Do you have any kind of sample or demo link where issue can be checked?

#5

Hi Stanislav,

Unfortunately I can’t give you an online sample as the app is on a private intranet; however I can give you the js and html code I am using to generate the timeline.

Using jQuery, and in the head of the html document:

function init() {
scheduler.locale.labels.timeline_tab = ‘Timeline’;
scheduler.locale.labels.section_custom = ‘Section’
scheduler.config.details_on_create = false;
scheduler.config.details_on_dblclick = true;
scheduler.config.icons_edit = [‘icon_cancel’];
scheduler.config.xml_date = ‘%Y-%m-%d %H:%i’;

var sections=[{key:1, label:‘Service Desk Executive Readerboard’}];

scheduler.createTimelineView({name: ‘timeline’,
x_unit: ‘day’,
x_date: ‘%D %M %d’,
x_step: 1,
x_size: 7,
//x_start: 16,
//x_length: 48,
y_unit:sections,
y_property: ‘section_id’,
render:‘bar’
});

scheduler.config.lightbox.sections=[{name:‘description’, height:130, map_to: ‘text’, type:‘textarea’, focus:true}];
scheduler.init(‘scheduler_here’,new Date(2010,4,2),‘timeline’);

scheduler.parse([
{ id: ‘54376183-6b22-43cb-9750-80e902ddbb98’, start_date: ‘2010-5-6’, end_date: ‘2010-5-18’, text: ‘Milestone :: Draft Deadline 1 :: May 06 2010 Achieved :: True’, section_id:1},
{ id: ‘54376183-6b22-43cb-9750-80e902ddbb99’, start_date: ‘2010-5-23’, end_date: ‘2010-5-30’, text: ‘Milestone :: Draft Deadline 2 :: May 06 2010 Achieved :: True’, section_id:1},
{ id: ‘54376183-6b22-43cb-9750-80e902ddbb97’, start_date: ‘2010-6-10’, end_date: ‘2010-6-29’, text: ‘Milestone :: Draft Deadline 3:: May 06 2010 Achieved :: True’, section_id:1}
],‘json’);
}

Html code:

'Milestone :: Draft Deadline 1 'Milestone :: Draft Deadline 2 'Milestone :: Draft Deadline 3
 
 

So if I was to repopulate and redraw the events for the timeline when I make a selection from the drop down list what would be the statements? I am thinking:

(pseudo-code)
scheduler.removeallevents
scheduler.parse(json array)

anything else?

Cheers,

pipes

#6

I may be wrong, but dates which you are using in select - except of first one, they point to empty time periods - sample event data are just outside of them.

When using the different dates - events rendered correctly

Check the attached sample.
1276252937.zip (39.3 KB)

#7

Hi Stansilav,

Sigh :slight_smile: Thank you. I’ll review the attached sample and ensure the dates are correct.

Cheers,

pipes