Copying Event Via Drag & Drop

[Chris]

Hi Guys,

I'm hoping for some collective genius as i've hit a stumbling block trying to implement a feature request on a Scheduling application I've written.

The desired effect i'm after is that on a moveEnd event, the user should be prompted with the option to either, Move or Copy the event, with an option to cancel the drag operation also.

So far i have the following (sections of code for illustration purpose only)

var eventHolder;

$("#scheduler").kendoScheduler({
moveEnd: function (e) {
        e.preventDefault();
        eventHolder = e;
          var dialog = $("#schedulerWindow").data("kendoWindow");
              dialog.center();
              dialog.open();
      }
});

So i'm preventing the default operation, populating a global placeholder variable with the event data so it's accessible from the following buttons.

$("#moveEventButton").kendoButton({
    click:function(e){
      var dialog = $("#schedulerWindow").data("kendoWindow");
      eventHolder = null;
      dialog.close();
    }

  });
  $("#copyEventButton").kendoButton({
    click:function(e){
      var dialog = $("#schedulerWindow").data("kendoWindow");
      eventHolder = null;
      dialog.close();
    }

  });
  $("#cancelDragButton").kendoButton({
    click:function(e){
      var dialog = $("#schedulerWindow").data("kendoWindow");
      eventHolder = null;
      dialog.close();
    }
  });

My scheduler data source is quite complex, but in essence contains, create:, update:, read: and destroy: elements, a parameterMap: function to parse the data before the ajax post and a parse: function to format the response.

But i'm at a bit of a loss on where to go next, ideally it would be as easy as calling a method to either create or edit the event but i get the feeling it's not going to be that simple.

Thanks in advance for any suggestions!

[Vladimir Iliev]

Hi Chris,

From this point you should use the scheduler and it's dataSource API inside the "click" event handlers (of the buttons inside the Window) to create new copy or edit the current event. For convenience I created small example which you can use as a baseline to achieve the desired behavior:

• Scheduler: Choose "copy" or "edit" on each "moveEnd" event

Regards,
Vladimir Iliev
Telerik

 

 

[Chris]

Hi Vladimir,

Many thanks for your help, it certainly got me down the right track, the "Move" function worked as expected (I had to do a little tweaking to get it to support dragging across grouped resources, as the code clock below).

if (typeof(eventHolder.resources.consultant) != "undefined"){
  eventHolder.event.set("consultant", eventHolder.resources.consultant);
}

​However the "Copy" function never triggered my datasources create command, and no ajax request was sent. For the time being I have duplicated the POST request in the copy function which does reach the required result but I understand it's not the "clean or tidy" way of doing it. However will suffice for now :)

Thanks Again

[Vladimir Iliev]

Hi Chris,

In order the "Copy" function start creating "Create" requests to the server you should make sure the model ID of the new events is set to the default value for it's type. This is already demonstrated in the example that I provide with my last reply:

dataSource: {
  schema: {
    model: {
      id: "taskId",
        fields: {
          taskId: { from: "TaskID", type: "number" },

var copy = eventHolder.event.toJSON();
copy.start = eventHolder.start;
copy.end = eventHolder.end;
copy.taskId = 0;

Regards,
Vladimir Iliev
Telerik