This is a migrated thread and some comments may be shown as answers.
Cloning or Moving events
3 Answers 23 Views
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
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

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
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.
0
Jon
Top achievements
Rank 1
answered on 03 Apr 2018, 01:03 PM

Veselin,

Many thanks... your code worked great albeit just a small typo... in the clone function the start and end time need updating as so:

copy.start = new Date(copy.start.getTime() + draggedDifference);
copy.end = new Date(copy.start.getTime() + draggedDifference);
 
changed to:
 
copy.start = new Date(copy.start.getTime() + draggedDifference);
copy.end = new Date(copy.end.getTime() + draggedDifference);

 

Regards

 

0
Veselin Tsvetanov
Telerik team
answered on 03 Apr 2018, 01:21 PM
Hello Jon,

Thank you for the note on the example issue. I will alter my original post so it shows the proper implementation, that you have shared.

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.
Asked by
Jon
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Jon
Top achievements
Rank 1
Share this question
or