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

Copying Event Via Drag & Drop

3 Answers 236 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 27 Jul 2014, 02:24 PM
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!





3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 29 Jul 2014, 08:37 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chris
Top achievements
Rank 1
answered on 29 Jul 2014, 09:39 AM
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
0
Accepted
Vladimir Iliev
Telerik team
answered on 29 Jul 2014, 02:13 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Chris
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or