Drag And Drop and upadate dragged event

Scheduler Javascript
#1

Hi :slight_smile:

I am dragging an event from a grid to a scheduler.
Drag and drop operations and server update (with dataprocessor) of date/time and unit are working but i have a lot of information inside an event (not only standard info) and when i drag from a grid i have to reload the single event to get this information (i reload info onAfterUpdateFinish) and now problems start:
When i reload the dragged event scheduler shows 2 time the same (dragged) event.

I have to delete the first dragged event? if yes when and where(what event?)?
Scheduler doesn’t update already loaded event (same id)?

thank you.

Jacopo

#2

i forgot to say that it appears twice only if move the dragged event or if i am dragin in another one.

#3

sorry it appear immediatly twice :frowning:

#4

Most probably the event created after dnd and one which are loaded from server side have different ids. Can you provide exact code snippet which you are using for event data updating ?
Just after new event creation - it has random id, which will be replaced with DB-based id after data saving. Be sure that you loading data with correct id.

and when i drag from a grid i have to reload the single event to get this information
If you have that info on client side, you can add all of it for newly created event as part of new event creation.

#5

here is my code:
grid_basket is the source grid and it have 5 columns with some info but not all that i need.

[code]scheduler.attachEvent(“onExternalDragIn”, function(id, source, event){
var id_grid =grid_basket.getSelectedRowId();
var cella = grid_basket.cellById(id_grid,4);
var ods = grid_basket.cellById(id_grid,0).getValue();
var oper = grid_basket.cellById(id_grid,1).getValue();
var tipo_int = grid_basket.cellById(id_grid,2).getValue();
var data_ini = grid_basket.cellById(id_grid,3).getValue();
var dest = grid_basket.cellById(id_grid,4).getValue();
var bgcolor = grid_basket.cellById(id_grid,4).cell.parentNode.bgColor;
var label = ods;
var evento_scheduler = scheduler.getEvent(id);
dragIn = true;
evento_scheduler.text = label;
evento_scheduler.isIntervento = “true”;
evento_scheduler.color = bgcolor;
evento_scheduler.FuoriSla = ‘’;
if(evento_scheduler.isIntervento == “true”)
{
var data_inizio = evento_scheduler.start_date.getDate()+"-"+(evento_scheduler.start_date.getMonth()+1)+"-"+evento_scheduler.start_date.getFullYear()+" dalle ore:"+evento_scheduler.start_date.getHours()+":"+evento_scheduler.start_date.getMinutes();
var data_fine = evento_scheduler.end_date.getDate()+"-"+(evento_scheduler.end_date.getMonth()+1)+"-"+evento_scheduler.end_date.getFullYear()+" alle ore:"+evento_scheduler.end_date.getHours()+":"+evento_scheduler.end_date.getMinutes();
var answer = confirm(“Si sta per modificare l’intervento “+evento_scheduler.ExtCod+” data inizio:”+data_inizio+",data fine:"+data_fine+" assegnato all’utente:"+scheduler.getLabel(“section_id”, evento_scheduler.section_id)+" confermi la modifica?");
if(answer)
{
openLighBox = true;
//evento_scheduler.id = id_grid;
scheduler.changeEventId(id, id_grid);
grid_basket.cellById(id_grid,1).setValue(scheduler.getLabel(“section_id”, evento_scheduler.section_id));
grid_basket.cellById(id_grid,3).setValue(evento_scheduler.start_date.getDate()+"-"+(evento_scheduler.start_date.getMonth()+1)+"-"+evento_scheduler.start_date.getFullYear()+" “+evento_scheduler.start_date.getHours()+”:"+evento_scheduler.start_date.getMinutes());
//return true;
}
else
{

		dp_presenze.setUpdateMode("off");
		scheduler.deleteEvent(id);
		dp_presenze.setUpdated(id,true);
		dp_presenze.setUpdateMode("cell");
		//return false;
	}
		
	}
	return true;

});[/code]

as you can see i change id of event here and the grid id is correct.

when update is completed:
dp_presenze is a dataprocessor linked to scheduler. Id of inserted event is corret because server correctly update db row.

[code]dp_presenze.defineAction(“inserted”,function(response){
var message = response.getAttribute(“message”);
var isIntervento = response.getAttribute(“isIntervento”);
var isAssIntConfermata = response.getAttribute(“isAssIntConfermata”);
var id = response.getAttribute(“sid”);
var idArea = response.getAttribute(“idArea”);
var idTipInt = response.getAttribute(“idTipInt”);
var event_object = scheduler.getEvent(id);
event_object[‘isIntervento’] = isIntervento;
event_object[‘idArea’] = idArea;
event_object[‘idTipInt’] = idTipInt;
var isAssenza = response.getAttribute(“isAssenza”);
if(isIntervento == “true”)
{
id_dragged = id;
event_object[‘isAssIntConfermata’] = isAssIntConfermata;
}
else
event_object[‘isAssenza’] = isAssenza;

	//visualizzaMessaggio(message,"green");
	dhtmlx.message(message);
	return true;
		});[/code]

When update is completed:
id_dragged is != 0 if i dragged in somenthing from the grid.

[code]dp_presenze.attachEvent(“onAfterUpdateFinish”,function(){
if(id_dragged !=0)
{

			scheduler.setLoadMode(false);
			scheduler.load("PresenzeTurniSave?action=getInterventiPresenze&id="+id_dragged+"&view="+scheduler.getState().mode, function(){
	  			scheduler.setCurrentView();
		  	});
			scheduler.setLoadMode("week");
			id_dragged = 0;
		}
		return true;
	});[/code]

if we can find a solution i will insert all info on my grid and then copy them when i drag an event, but i will prefer to load it from server.

Thank you :slight_smile:

#6

after several test i figured that if i use

evento_scheduler.id = id_grid;

then i have 2 events, maybe because as you said id of object dont change in the right way, but if i use

scheduler.changeEventId(id, id_grid);

i have an error when your code try to check collision:

TypeError: ev is undefined dhtmlxscheduler_collision.js Line 62

ev or my event is undefined, i suppose because i change id and somehow it can find it anymore.

#7

ok i found a solution.

I have figured out that if i use EVENT.ID = myid dataprocessor send myid to server but the event object, that i dragged in from grid to scheduler, have the old and casual id (timestamp), so it appear twice when a reload from server.

My solution is to get the timestamp id (onExternalDragIn event) and use it to delete the event at the end of all operation, in my case when dataprocessor end to update (onAfterUpdateFinish).

this is my code:
id_inserted_dragged is a global variable that contain the casual id(timestamp)

[code]scheduler.attachEvent(“onExternalDragIn”, function(id, source, event){
id_inserted_dragged = id;
var id_grid =grid_basket.getSelectedRowId();
var cella = grid_basket.cellById(id_grid,4);
var ods = grid_basket.cellById(id_grid,0).getValue();
var oper = grid_basket.cellById(id_grid,1).getValue();
var tipo_int = grid_basket.cellById(id_grid,2).getValue();
var data_ini = grid_basket.cellById(id_grid,3).getValue();
var dest = grid_basket.cellById(id_grid,4).getValue();
var bgcolor = grid_basket.cellById(id_grid,4).cell.parentNode.bgColor;
var label = ods;
var evento_scheduler = scheduler.getEvent(id);
dragIn = true;
evento_scheduler.text = label;
evento_scheduler.isIntervento = “true”;
evento_scheduler.color = bgcolor;
evento_scheduler.FuoriSla = ‘’;
if(evento_scheduler.isIntervento == “true”)
{
var data_inizio = evento_scheduler.start_date.getDate()+"-"+(evento_scheduler.start_date.getMonth()+1)+"-"+evento_scheduler.start_date.getFullYear()+" dalle ore:"+evento_scheduler.start_date.getHours()+":"+evento_scheduler.start_date.getMinutes();
var data_fine = evento_scheduler.end_date.getDate()+"-"+(evento_scheduler.end_date.getMonth()+1)+"-"+evento_scheduler.end_date.getFullYear()+" alle ore:"+evento_scheduler.end_date.getHours()+":"+evento_scheduler.end_date.getMinutes();
var answer = confirm(“Si sta per modificare l’intervento “+evento_scheduler.ExtCod+” data inizio:”+data_inizio+",data fine:"+data_fine+" assegnato all’utente:"+scheduler.getLabel(“section_id”, evento_scheduler.section_id)+" confermi la modifica?");
if(answer)
{
openLighBox = true;
evento_scheduler.id = id_grid;

		grid_basket.cellById(id_grid,1).setValue(scheduler.getLabel("section_id", evento_scheduler.section_id));
		grid_basket.cellById(id_grid,3).setValue(evento_scheduler.start_date.getDate()+"-"+(evento_scheduler.start_date.getMonth()+1)+"-"+evento_scheduler.start_date.getFullYear()+" "+evento_scheduler.start_date.getHours()+":"+evento_scheduler.start_date.getMinutes());
		//return true;
	}
	else
	{
		
		dp_presenze.setUpdateMode("off");
		scheduler.deleteEvent(id);
		dp_presenze.setUpdated(id,true);
		dp_presenze.setUpdateMode("cell");
		//return false;
	}
		
	}
	return true;

});[/code]

Don’t try to use scheduler.changeEventId(id, new_id);

and when dp has finished:
if id_inserted_dragged is != 0 a delete the event.

[code]dp_presenze.attachEvent(“onAfterUpdateFinish”,function(){
if(id_dragged !=0)
{

			scheduler.setLoadMode(false);
			
			scheduler.load("PresenzeTurniSave?action=getInterventiPresenze&id="+id_dragged+"&view="+scheduler.getState().mode, function(){
				if(id_inserted_dragged != 0)
				{
					dp_presenze.setUpdateMode("off");
					scheduler.deleteEvent(id_inserted_dragged,true);
					id_inserted_dragged =0;
					dp_presenze.setUpdateMode("cell");
				}  						
	  			scheduler.setCurrentView();
	  			
		  	});
			scheduler.setLoadMode("week");
			id_dragged = 0;
		}
		return true;
	});[/code]