How to drag and drop records from Grid to Scheduler in Angular?

This article explains how to drag and drop records from Grid to schedular in angular.

The following steps to drag the records from the Grid component and drop the records as an appointment in Angular Scheduler component.

Step 1: Implement the Scheduler component using our Getting Started documentation.

Step 2: Follow the Getting Started documentation to implement the Grid component.

Step 3: To achieve the drag and drop of records from the Grid to the Schedule,  allowRowDragAndDrop enables the ability to drag and drop rows and use the rowDrag and rowDrop events to drag the data from the Grid and drop it on the Schedule.

 [app.component.ts]

@Component({

  ……

  template: `

  ………

  ………

  <ejs-schedule id='Schedule' #scheduleObj width='800px' height='650px'

    [currentView]="currentView"

    [selectedDate]="selectedDate"

    [eventSettings]="eventSettings">

  </ejs-schedule>

  ………

   <ejs-grid id='Grid' #gridObj

        [dataSource]='gridDS' width="300px"

        [allowSelection]="true"

        [allowRowDragAndDrop]="true"

        [editSettings]='editSettings'

        [rowDropSettings]="srcDropOptions"

        (rowDrop)="onDragStop($event)"

        (rowDrag)="onRowDrag($event)">     

   </ejs-grid>

 `,

  styleUrls: ['./app.component.css']

})

Step 4: The Grid is configured to allow row drag and drop, and the Scheduler is set as the drop target. Now, cancel the default drag and drop action in the rowDrag and rowDrop events.

Step 5: In the rowDrop event, get the closest parent element of the drop target that has the class 'e-content-wrap', check whether it is null or not, and the event target has the class name of e-work-cells.

Step 6: Then get the data from the event arguments and use the getCellDetails method to get the cell details from the Scheduler using the target argument.

Step 7: Now frame the eventData object for the appointment, where details can be gotten from the event arguments data of the Grid and cell details from the Scheduler.

Step 8: Once the appointment data object is formed, the new appointment is added to the Scheduler by using the addEvent method, and the row is deleted from the Grid by using the deleteRecord method.

[app.component.ts]

export class AppComponent {

  ………

  ………

  ………

    onRowDrag(args: any): void {

      args.cancel = true;

    }

    onDragStop(args: any): void {

       args.cancel = true;

       let scheduleElement: Element = <Element>closest(args.target, '.e-content-wrap');       // To get closest parent element of the drop target.

       if (scheduleElement) {

         if (args.target.classList.contains('e-work-cells')) {

           const filteredData: Object = args.data;

           let cellData: CellClickEventArgs = this.scheduleObj.getCellDetails(args.target);

           let eventData: { [key: string]: Object } = {

                Id: filteredData[0].Id,

                Name: filteredData[0].Name,

                StartTime: cellData.startTime,

                EndTime: cellData.endTime,

                IsAllDay: cellData.isAllDay,

                Description: filteredData[0].Description

             }; // This line creates a new event object with the data from the dropped row and the cell details.

           this.scheduleObj.addEvent(eventData);  // This line adds the new event to the scheduler.

           this.gridObj.deleteRecord(args.data[0]);  // This line deletes the dropped row from the grid.

         }

     }

  }

Refer to the working sample for additional details and implementation: [Sample]

See Also:

• How to prevent drag and drop items from external source