Refresh y-achsis for TreeTimeline

This is my first post so first of all:
Thank you for providing such a great library for free with such an active community!

Nevertheless I’m going crazy on a specific funtion. :astonished:

What I’m trying to do is to publish a TreeTimeline view with tabs for ‘day’, ‘week’ and ‘month’. The data should be loaded dynamically through a java backend.

I managed to create the initial (‘day’) view by loading the backend data to the client, transform them into the TreeTimeline data-format shown in the guide and populate them to the scheduler (only the initial ‘day’ view).
My problem now is that the other views don’t show the whole content.
To clarify: The other views only show the hardcoded parents set in the ‘setTreeChilds()’-method but not the content set through my sections = sched.serverList("sections2") variable.

I’m quite new to javascript so any help would be highly appreciated!

What I’ve tried:

  • Attach an onViewChangeEvent which triggers sched.updateView() -> no success
  • Attach an onViewChangeEvent which triggers sched.clearAll() and sched.setCurrentView() -> no success
  • Attach an onViewChangeEvent which triggers sched.updateCollection(“sections2”, sched.serverList(“sections2”)) -> no success

My init code:

[code]function initSched() {
var sections = scheduler.serverList(“sections2”);
var markedTimes = scheduler.serverList(“markedTimes”);
var permission = scheduler.serverList(“permission”);

// load config
...
// load Templates 
...
// define Lightbox Template
...
// init events
...

// create Timeline	(day)
scheduler.createTimelineView({
	name:	"timeline_D",
	x_unit:	"minute",
	x_date:	"%H:%i",
	x_step:	30,
	x_size: 24,
	x_start: 16,
	x_length:	48,
	y_property:	"section_id",		
	y_unit:setTreeChilds(sections),			
	render:"tree",
	section_autoheight: false,
	dy: 30
});
// (week)
scheduler.createTimelineView({
	name:	"timeline_W",
	x_unit:	"day",
	x_date:	"%d %M",
	x_step:	1,
	x_size: 7,
	y_property:	"section_id",		
	y_unit: setTreeChilds(sections),			
	render:"tree",
	section_autoheight: false,
	dy: 30
});
// (month)
scheduler.createTimelineView({
	name:	"timeline_M",
	x_unit:	"month",
	x_date:	"%M",
	x_step:	1,
	x_size: 1,
	y_property:	"section_id",	
	y_unit: setTreeChilds(sections),			
	render:"tree",
	section_autoheight: false,
	dy: 30
});


//===============
//Initialisation
//===============
scheduler.init('scheduler_div',null,'timeline_D');
scheduler.setLoadMode("month");	// lazy loading
scheduler.load("resource.do", function() {
	//=== user rights ===
	var user_key = permission[0].label;
	var right = permission[1].label;
	initPermission(user_key, right);
	
	//=== create sections (y-achsis)
	sections = setTreeChilds(sections);			// create TreeTimeline sections
	
	//=== blocked times
	for(var i = 0; i < markedTimes.length; i++) {
		var marked = markedTimes[i];
		
		if(marked.id == 0) {
			createGlobalBlock(marked);
		}
		else {
			createSpecificBlock(marked);
		}
	}
	scheduler.updateView();	// for addMarkedTS
});

// Dataprocessor (CRUD)
var dp = new dataProcessor("resource.do");
dp.defineAction("updated",function(node) {	
		...
	});
dp.init(scheduler);

// console.log(window); //XXX DEBUG
}
[/code]

My setTreeChilds() Method:

[code]function setTreeChilds(sections) {
// init Parent-Objekte
var admin = {key:“admin”, label:“Administration”, open:false, children:[]};
var daten = {key:“daten”, label:“Datenteam”, open:true, children:[]};
var tech = {key:“tech”, label:“Technik”, open:false, children:[]};
var phrasen = {key:“phrasen”, label:“Phrasenteam”, open:false, children:[]};
var recherche = {key:“recherche”, label:“Recherche”, open:false, children:[]};

// iterate through backend data
for(var i = 0; i < sections.length; i++) {
	var sec = sections[i];
	if(sec.branch == "A") {
		scheduler.addSection({key:sec.key+'', label:sec.label}, "admin");
	}
	else if(sec.branch == "D") {
		scheduler.addSection({key:sec.key+'', label:sec.label}, "daten");
	}
	else if(sec.branch == "I") {
		scheduler.addSection({key:sec.key+'', label:sec.label}, "tech");
	}
	else if(sec.branch == "P") {
		scheduler.addSection({key:sec.key+'', label:sec.label}, "phrasen");
	}
	else if(sec.branch == "R") {
		scheduler.addSection({key:sec.key+'', label:sec.label}, "recherche");
	}
}

// combine parents in array
var treeSections = [admin, daten, tech, phrasen, recherche];
return treeSections;

}[/code]

What am I doing wrong? How can I populate the data in the other views?

Thanks in advance!
Cheers Simon

The above code will not work, as it uses the serverList in wrong way
Basically, when you are using serverList, you can’t preprocess it on the client side.

 var sections = scheduler.serverList("sections2");   

This command do not load the list in sections var, as loading is async, it only starts data loading, som when you are calling setTreeChilds(sections), it is executed against the empty array. ( When you assigning “sections” directly to y_unit, scheduler do apply some magic, and on data loading recreates list of timeline options )

You can use any kind of custom ajax call ( dhtmlxAjax, or third party lib ) to get the json data for the y_unit list, after that you can call

scheduler.matrix["timeline_D"].y_unit = your_json_structure; scheduler.callEvent("onOptionsLoad",[]);

Thanks a million, Stanislav, for setting this straight for me!!!
Like already said: I’m a total javascript-newbie.

Nevertheless: I’ve managed to send the correct data from my backend and retrieve it on client-side via jQuery (was already available throug another component).

The problem now is that I’m too stupid to find the right place for your code :frowning: .
everything I tried resulted in an ‘undefined’ message in the scheduler-gui (y-achsis) or in a javascript error (see attached image).

My new function

[code]function initTree() {
$.getJSON(‘addopts.do’, function(responseText) {// get JSON response
var result = responseText;

		console.log(result);	//XXX DEBUG
		scheduler.matrix["timeline_D"].y_unit = result;
		scheduler.matrix["timeline_W"].y_unit = result;
		scheduler.matrix["timeline_M"].y_unit = result;
		scheduler.callEvent("onOptionsLoad",[]);

// scheduler.updateView(); // tried this in desperation
});
}[/code]

Ive tried to place the new code at those places:

  • at the beginning of my initSched() function
  • after the last scheduler.createTimelineView
  • after scheduler.init() but before scheduler.setLoadMode()
  • after scheduler.setLoadMode()
  • inside scheduler.load()
  • after scheduler.load()
  • after dataProcessor (dp.init())

I’m working with the dhtmlScheduler 3.6_std_121203 version.

I would be very grateful if someone could give me (another) hand.
Thanks in advance!

Cheers Simon


The only requirement - you need to place it after createTimelineView, so the timeline in question will be defined at least.

Also, be sure that responseText is the valid structure ( array of objects, with key and value properties )

Once again: Thank you Stanislav!

The problem is now solved.
Reason for this was the async call of my initTree() method (to be specific the async call of jQuerys getJSON()). After changing this and applying your code everything works like a charm!

I’m happy, boss is happy, I can enjoy my weekend and hope you do, too!

Cheers
Simon

Hello, i’m working with the treetimeline mode and i’m trying to load the data using the php connector, but i’m having a lot of trouble with that, i’m wondering if you could help me with this, this is my code:

//in the index
function init() {
var sections = scheduler.serverList(“sections”);

	scheduler.locale.labels.timeline_tab = "Timeline";
	scheduler.locale.labels.section_custom="Section";
	scheduler.config.details_on_create=true;
	scheduler.config.details_on_dblclick=true;
	scheduler.config.xml_date="%Y-%m-%d %H:%i";
	
            scheduler.config.lightbox.sections=[	
		{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
		{name:"custom", height:23, type:"timeline", options:null , map_to:"section_id" }, //type should be the same as name of the tab
		{name:"time", height:72, type:"time", map_to:"auto"}
	]
		scheduler.createTimelineView({
		section_autoheight: false,
		name:	"timeline",
		x_unit:	"minute",
		x_date:	"%H:%i",
		x_step:	30,
		x_size: 24,
		x_start: 16,
		x_length:	48,
		y_unit: sections,
		y_property:	"section_id",
		render: "tree",
		folder_dy:20,
		dy:60
	});
	
	scheduler.init('scheduler_here',new Date(2010,2,2),"timeline");
            scheduler.load("types.php");
	
	var dp = new dataProcessor("types.php");
	dp.init(scheduler);
}

//my connector

<?php include('connector/scheduler_connector.php');//includes the file $res=mysql_connect("localhost","root","");//connects to the server with our DB mysql_select_db("timeline");//connects to the DB.'sampleDB' is the DB's name $list = new OptionsConnector($res, $dbtype); $list->render_table("types","type_id","type_id(value),name(label)"); $scheduler = new schedulerConnector($res, $dbtype); //we set the same name as used on the client side - 'sections' $scheduler->set_options("sections", $list); $scheduler->render_table("events","id","start_date,end_date,text,type_id"); ?>

when i try to add an event to the timeline view, i have this error (in the developers console)

Uncaught TypeError: Object # has no method ‘getActionData’
scheduler._locate_cell_timeline
scheduler._click.dhx_marked_timespan.scheduler._click.dhx_cal_data
dhtmlxscheduler_timeline.js:39

And i don´t have any idea of what is happening :cry:

Please be sure that you are using all files from the latest version

Uncaught TypeError: Object # has no method ‘getActionData’

Such error can occurs if you are using latest timeline extension but with older dhtmlxscheduler.js file.

Thank you I’ll check that

Here i’m again, anybody knows what is the data structure that returns the serverlist method??

Being specific, i’m using scheduler.serverList(“sections”); for the treetimeline view and i want to know what is the specific data that it returns

That is an array of objects, each of them contains at least two properties - “label” and “value”

Thank you, and for example if i want to load the entire y_unit property from the database, what can i use?
And which is data base structure that i need?

Thank you, and for example if i want to load the entire y_unit property from the database, what can i use?
And which is data base structure that i need?