Copying Event Via Drag & Drop

4 posts, 1 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    May 2014

    Posted 27 Jul 2014 Link to this post

    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!





  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 29 Jul 2014 Link to this post

    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!
     
  3. Chris
    Chris avatar
    2 posts
    Member since:
    May 2014

    Posted 29 Jul 2014 in reply to Vladimir Iliev Link to this post

    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
  4. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 29 Jul 2014 Link to this post

    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!
     
Back to Top