Cloning or Moving events in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Cloning or Moving events

3 Answers 23 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Jon asked on 28 Mar 2018, 11:00 AM

I have a scheduler with the following code for moveEnd

moveEnd: function (e) {

//For Work Managers this code will give the option to clone or move when an event is moved.

if ($WorkManager == 'true') {

e.preventDefault();

eventHolder = e;

var dialog = $("#schedulerWindow").data("kendoWindow");

dialog.center();

dialog.open();

}

},

The dialog has just two buttons CLONE which has an onclick function of onClone() and MOVE which has an onclick function of onMove(). These functions are listed below.

function onClone() {

var dialog = $("#schedulerWindow").data("kendoWindow");

var scheduler = $("#scheduler").data("kendoScheduler");

dialog.close();

var copy = eventHolder.event.toJSON();

copy.start = eventHolder.start;

copy.end = eventHolder.end;

copy.RID = -1;

delete copy.uid;

scheduler.dataSource.add(copy);

scheduler.dataSource.sync();

eventHolder = null;

}

function onMove() {

var dialog = $("#schedulerWindow").data("kendoWindow");

var scheduler = $("#scheduler").data("kendoScheduler");

dialog.close();

eventHolder.event.set("start", eventHolder.start);

eventHolder.event.set("end", eventHolder.end);

scheduler.dataSource.sync();

eventHolder = null;

}

This was fine when you could only select one event at a time. The latest version of the code will allow the use of Ctrl Click to select several events

If I select several events and try and clone or move only the last clicked event is cloned/moved. What changes to the Clone and Move functions do I need to make for this to work with one or more selected events.

Thanks

3 Answers, 1 is accepted

Accepted

answered on 30 Mar 2018, 08:44 AM

Hello Jon,

As the offset of all selected and moved / cloned events will be the same, I would suggest you to get that offset in the moveEnd event and store it. Also, in the same event handler you could retrieve the currently selected events:

var selected;

var draggedDifference = 0;

...

moveEnd: function (e) {

//For Work Managers this code will give the option to clone or move when an event is moved.

if ($WorkManager == 'true') {

e.preventDefault();

var draggedEvent = e.event;

draggedDifference = e.start - draggedEvent.start;

selected = e.sender.select().events;

var dialog = $("#schedulerWindow").data("kendoWindow");

dialog.center();

dialog.open();

}

},

Then in the onClone or onMove handlers you will need to iterate over all selected events and apply the draggedDifference stored previously:

function onClone() {

var dialog = $("#schedulerWindow").data("kendoWindow");

var scheduler = $("#scheduler").data("kendoScheduler");

dialog.close();

for(var i = 0; i < selected.length; i++) {

var currentEvent = selected[i];

var copy = currentEvent.toJSON();

copy.start = new Date(copy.start.getTime() + draggedDifference);

copy.end = new Date(copy.end.getTime() + draggedDifference);

copy.RID = -1;

delete copy.uid;

scheduler.dataSource.add(copy);

}

selected = null;

draggedDifference = 0;

scheduler.dataSource.sync();

}

function onMove() {

var dialog = $("#schedulerWindow").data("kendoWindow");

var scheduler = $("#scheduler").data("kendoScheduler");

dialog.close();

for(var i = 0; i < selected.length; i++) {

var currentEvent = selected[i];

currentEvent.set("start", new Date(currentEvent.start.getTime() + draggedDifference));

currentEvent.set("end", new Date(currentEvent.end.getTime() + draggedDifference));

}

selected = null;

draggedDifference = 0;

scheduler.dataSource.sync();

}

Regards,
Veselin Tsvetanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.