Multiple addevent events slow

Scheduler Javascript
#1

Hello,

When I do multiple addevents events, it’s very slow. The browsers freezes for a couple of seconds.
Is there a way to optimize this?

This is the code I use (it’s in the timeline view):

for(i=0;i<employees.length;i++){
	employee_id	= parseInt(employees[i]);
	tree_id		= "employee_"+employee_id;
	if(employee_id!="" && parseInt(employee_id) > 0){
		scheduler.addEvent({
			start_date: 		sdate,
			end_date: 			edate,
			text:				"",
			tree_id:			tree_id,
			project_id: 		project_id,
			act_id: 			act_id,
			employee_id: 		employee_id,
			event_custom_1:		ev_comments
		});
	}
}
#2

Hello,

You definitely should not add events this way.
Form array of objects and then parse it.

[code] scheduler.parse([
{ start_date: “2009-06-30 09:00”, end_date: “2009-06-30 12:00”, text:“Task A-12458”, section_id:1},
{ start_date: “2009-06-30 10:00”, end_date: “2009-06-30 16:00”, text:“Task A-89411”, section_id:1},
{ start_date: “2009-06-30 10:00”, end_date: “2009-06-30 14:00”, text:“Task A-64168”, section_id:1},
{ start_date: “2009-06-30 16:00”, end_date: “2009-06-30 17:00”, text:“Task A-46598”, section_id:1},

			{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Task B-48865", section_id:2},
			{ start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"Task B-44864", section_id:2},
			{ start_date: "2009-06-30 16:30", end_date: "2009-06-30 18:00", text:"Task B-46558", section_id:2},
			{ start_date: "2009-06-30 18:30", end_date: "2009-06-30 20:00", text:"Task B-45564", section_id:2},

			{ start_date: "2009-06-30 08:00", end_date: "2009-06-30 12:00", text:"Task C-32421", section_id:3},
			{ start_date: "2009-06-30 14:30", end_date: "2009-06-30 16:45", text:"Task C-14244", section_id:3},

			{ start_date: "2009-06-30 09:20", end_date: "2009-06-30 12:20", text:"Task D-52688", section_id:4},
			{ start_date: "2009-06-30 11:40", end_date: "2009-06-30 16:30", text:"Task D-46588", section_id:4},
			{ start_date: "2009-06-30 12:00", end_date: "2009-06-30 18:00", text:"Task D-12458", section_id:4}
		],"json");[/code]

Best regards,
Ilya

#3

Hello Ilya,

Thanks for the quick response!

The scheduler.parse function does not add the events (I’m using de dataconnector), thats why I use the addEvent function. How can I fix this?

Michiel

#4

Hello,

Please explain your use case.
Do you load this way events from the database?

You want them to be sent to the server as well? One by one?

Kind regards,
Ilya

#5

Hello Ilya,

I have a window where users can select multiple employees.
In the javascript I split the employees by comma and make a loop.
Then I’m saving it to the database.

Please advise me how I do this the best way.

Michiel

#6

Just curious - how many events are there?

What you can do:

  1. Parse as I showed above. That will add them to scheduler itself
  2. Iterate array and for each event call “onEventAdded” event
scheduler.callEvent("onEventAdded", [event_id, event]);

This will save them one by one to the database.

Best regards,
Ilya

#7

Hello Ilya,

The amount of events are between the 5 and 25 I think, but I can also be one or 50.
Just how much the user select.

I trying this code:

scheduler.callEvent("onEventAdded", [event_id, event]);

But how do I know what the event_id is? This is assigned after saving it to the database.

Michiel

#8

Hello Ilya,

I think I figured it out, but it’s still as slow as the addEvent function.
This is the code I have now:

var data = [];
for(i=0;i<employees.length;i++){
	employee_id	= parseInt(employees[i]);
	tree_id		= "employee_"+employee_id;
	if(employee_id!="" && parseInt(employee_id) > 0){
		data.push({
			id:					scheduler.uid(),
			start_date: 		dbdateformat(sdate),
			end_date: 			dbdateformat(edate),
			text:				"",
			tree_id:			tree_id,
			project_id: 		project_id,
			act_id: 			act_id,
			employee_id: 		employee_id,
			event_custom_1:		ev_comments
		});
	}
}
scheduler.parse(data,"json");

$.each(data,function(key,val){
	scheduler.callEvent("onEventAdded", [val.id,val]);
});
#9

Indeed, there is a better but more complex way to do it. Please check following solution:

[code]function createEvents(dates_as_string) {
var events = [];
for (var i = 0; i < 50; i++) {
var start_date = new Date();
var end_date = new Date(+start_date + 5 * 60 * 1000);

	if (dates_as_string) {
		var converter = scheduler.date.date_to_str(scheduler.config.xml_date);
		start_date = converter(start_date);
		end_date = converter(end_date);
	}

	events.push({
		id: scheduler.uid(),
		start_date: start_date,
		end_date: end_date,
		text: "Event " + i
	});
}
return events;

}

var parse = document.getElementById(“parse”);
parse.onclick = function() {
// returns array of objects. start and end dates are strings
var events = createEvents(true);

// dataprocessor won't mark updated rows
var row_mark_id = dp.attachEvent("onRowMark", function() {
	return false;
});
// on "onFullSync" event we are detaching "onRowMark" handler and "onFullSync" itself
var attach_id = dp.attachEvent("onFullSync", function() {
	dp.detachEvent(row_mark_id);
	dp.detachEvent(attach_id);
});

// disabling automatic updated
dp.setUpdateMode("off");

// adding events to scheduler itself
scheduler.parse(events, "json");

// calling onEventAdded event to mark events for sending to the database
for (var i = 0; i < events.length; i++) {
	scheduler.callEvent("onEventAdded", [events[i].id]);
}

// sending data
dp.sendData();
// reverting default update mode
dp.setUpdateMode("on");

};[/code]
Kind regards,
Ilya

#10

Hi Ilya,

This is indeed much faster! Thanks!
But when I’v created some events by this method, I can’t mark event anymore for deleting or updating. I think it’s because of detaching these events:

var row_mark_id = dp.attachEvent("onRowMark", function() {
	return false;
});
var attach_id = dp.attachEvent("onFullSync", function() {
	dp.detachEvent(row_mark_id);
	dp.detachEvent(attach_id);
});

Is this the reason? I how can I fix this/

Michiel

#11

What do you mean? You can’t create new event or delete existing one?
Set an alert inside onFullSync handler - is it executed?

Best regards,
Ilya

#12

Hi Ilya,

Both, I can’t create new events, delete or update events.

I added console.log(row_mark_id+" | "+attach_id); on the onfullsync function.
This is the result: ev_onrowmark:0 | ev_onfullsync:0

Michiel

#13

Hi Ilya,

This did the trick:

dp.setUpdateMode("cell");

updatemode “on” doesn’t exists.

Michiel

#14

Ouch, my fault.
It’s “row”, “cell” (applies to grid, I believe) and “off”.

Best regards,
Ilya

#15

Hi Ilya,

In the source of the scheduler I found this code:

setUpdateMode:function(mode,dnd){
	this.autoUpdate = (mode=="cell");
	this.updateMode = mode;
	this.dnd=dnd;
}

and

function dataProcessor(serverProcessorURL){
    this.serverProcessor = serverProcessorURL;
    this.action_param="!nativeeditor_status";
    
	this.object = null;
	this.updatedRows = []; //ids of updated rows
	
	this.autoUpdate = true;
	this.updateMode = "cell";

So I think “cell” is the correct mode?

Michiel

#16

Yes, “cell” is the default and correct mode.

Best regards,
Ilya