External Drag-Drop , Angular scheduler

[Swarupa N]

Hello,

I liked this approach of External drag-drop to scheduler fromTreeViewControl. It works perfectly fine. Is it also possible to reverse the implementation. Means Dropping scheduled appointment back to Tree View?

https://ej2.syncfusion.com/angular/demos/#/material/schedule/external-drag-drop

In above example can I move patients back to waiting list?

[Hareesh Balasubramanian]

Hi Swarupa, 

Greetings from Syncusion Support..! 

We have prepared a sample based on your shared query “Need to provide external drop and drop support from Treeview to the Scheduler and vice-versa” using eventDragArea property, dragStop event of the Scheduler component. 

Sample: https://stackblitz.com/edit/angular-external-drag-and-drop-btw-sch-and-treeview?file=app.component.ts  

  onDragStop(args: any): void { 

    if (args.target.closest('.e-treeview')) { 

      args.cancel = true; 

      this.scheduleObj.deleteEvent(args.data); 

      let data = args.data; 

      data.Name = args.data.Name; 

      (this.treeObj.fields.dataSource as any).push(data); 

      this.treeObj.refresh(); 

    } 

  } 

  public dragArea = 'body'; 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Swarupa N]

Thanks Hareesh  for the solutions. Yes it works fine.

Only one condition needs to be checked for closest target instead of '.e-treeview' better to maintain the parent class. Because if waiting list is empty, its difficult to drag and drop appointment to waiting area.

onDragStop(args: any): void {

    if (args.target.closest('.e-treeview')) {}

[Nevitha Ravi]

Hi Swarupa, 

Thanks for you update, we are happy that our provided solution helped you. 

Regards, 

Nevitha 

[Swarupa N]

Is it possible to highlight the drop area when we start dragging the appointment? I don't see any option to add styling when we start dragging planned appointment and drop to waiting list.

[Hareesh Balasubramanian]

Hi Swarupa, 

Thanks for the update. 

We have modified our previously updated sample based on your shared query “Need to styling while the appointment is dropped to the waiting list (Treeview component)” using dragStop event of our Scheduler, which can be downloaded from the following link. 

Sample: https://stackblitz.com/edit/angular-external-drag-and-drop-btw-sch-and-treeview-jkqdwl?file=app.component.ts 

  onDragStop(args: any): void { 

    if (args.target.closest('.e-treeview')) { 

      args.cancel = true; 

      this.scheduleObj.deleteEvent(args.data); 

      let data = args.data; 

      data.Name = args.data.Name; 

      data.Id = (this.treeObj.fields.dataSource as any).length + 1; 

      (this.treeObj.fields.dataSource as any).push(data); 

      this.treeObj.refresh(); 

      let treeObj = document 

        .querySelector('.e-treeview') 

        .querySelectorAll('.e-list-item'); 

      for (let i = 0; i < treeObj.length; i++) { 

        if (parseInt(treeObj[i].getAttribute('data-uid')) == data.Id) { 

          (treeObj[i] as any).style.backgroundColor = 'green'; 

        } 

      } 

    } 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh