The scheduler does not update when I move an event by drag

Question

Hello. I'm trying to edit an event using the OnItemDrag method, but this method doesn't work after the implementation I did. The flow is as follows: On the OnItemDrag method, I make 2 calls on the back end application to get the subject and class Ids, after that I create an event which I send the onActionBegin method.

On the onActionBegin method I make a call to the back-end app and I want to update the response data on the scheduler.

To keep things simple, I used data mock-up.

I have attached to this thread the back-end and front-end solution.

Attachment: TestApps_792925f8.zip

Ruksar Moosa Sait · Answer

Hi Cezar,We have checked on your shared codes and let you know that
you can directly update the data to the dataSource in the OnActionBegin
method once the data is received like the below code snippet. Also, we would like to inform you that it is not necessary
to use drag and dragStop events as they can be implemented when
you drag an appointment from an external dataSource(tree). if (response.data) {    let eventData = {   
  Id: response.data.Id,   
  Class: response.data.Class,   
  Subject: response.data.Subject,   
  Teacher: response.data.Teacher,   
  SubjectType: response.data.SubjectType,   
  StartTime: startTimeTest,   
  EndTime: endTimeTest   
  };   
  this.allowUpdate = true;   
  this.scheduleObj.eventSettings.dataSource =
[eventData];  }   
  Kindly try the above solution and let us know if this meets
your requirement.Regards,Ruksar Moosa Sait

Cezar · Answer

The suggested method does not work, the event is no longer displayed on the screen after it has been dragged.

And even if it works, I don't want it because I will have more events on the scheduler and if I use "this.scheduleObj.eventSettings.dataSource = [eventData];", this would only add to the scheduler the event I edited and I don't want the rest of the events to go away.

Can you suggest me a way to update a scheduler when I drag an existing event from the scheduler at a different time slot?

Ravikumar Venkatesan · Answer

Hi Cezar,We have validated your query “The suggested method
does not work, the event is no longer displayed on the screen after it has been
dragged” at our end. You have used the saveEvent method of the
Schedule in the drag event of the Schedule. So, the saveEvent method of
the Schedule is triggered multiple times while you perform a drag action and it
causes a looping. Because of that drag and dropping an appointment in your
sample project is not working. Now we have commented the saveEvent
method from the drag event of the Schedule and the drag and drop works as
expected.[index.js]

async onItemDrag(event) {
      if (event.data?.Id) {
     
    //edit
  with drag data
     
    var result = await this.GetSubject(event.data.Id);

let currentClass;
     
    if (event.data.StartTime) {
     
      currentClass = await this.GetClass(event.data.Id);
     
    }

let eventData = {
     
      Id: event.data.Id,
     
      StartTime: event.data.StartTime,
     
      EndTime: event.data.EndTime,
     
      SubjectId: result.Id,
     
      ClassId: currentClass.Id
     
    };

// this.scheduleObj.saveEvent(eventData);
      }
    }

Kindly let us know if you need any further
assistance.Regards,Ravikumar Venkatesan

Cezar · Answer

Thanks for the suggestion.Can you help me with another problem?  When I try to move an existing event with drag and drop, which is Monday between 8 and 10 on Friday from 18 to 20, it moves on Friday from 8 to 10 and that is wrong. Also, if I'm trying to move an event that is on Friday from 8-10 to 18-20, it will move in some cases again on Friday from 8-10, or in other cases from 8:30-10:30, which is wrong again.Can you help me with a solution to solve these problems?

Ravikumar Venkatesan · Answer

Hi Cezar,We have validated your query “Try to move an
existing event with drag and drop, which is Monday between 8 and 10 on Friday
from 18 to 20, it moves on Friday from 8 to 10 and that is wrong” at our
end. You have set a height property value to the Schedule more than the height
it required. So, it causes the problem. Now we have removed the height property
from the Schedule and it works as expected. So, we suggest you remove the
height property from the Schedule. So, the Schedule will automatically adjust
its height based on its need.Kindly let us know if you need any further assistance.Regards,Ravikumar Venkatesan