drag and drop records from grid to schedule

[Muzaffer Birben]

Hi,

I created grid.ts and scheduler.ts and I wasn't able to find how to drag and drop records from grid to scheduler. Is there any documentation or demo of the feature? 

[Balasubramanian Sattanathan]

Hi Muzaffer Birben, 

Greetings from Syncfusion Support. 

We have validated your requirement “drag and drop records from grid to schedule” at our side and prepared a sample based on that. It can be downloaded from the below GitHub link. 

Sample: https://github.com/SyncfusionExamples/how-to-drag-a-record-from-grid-and-drop-it-into-angular-scheduler 

Kindly try the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Muzaffer Birben]

Hi,

Any ideas on what could cause this? It fills the eventData but doesn't add it to the scheduler. 

 this.testScheduler.Schedule.addEvent(eventData) ==> Uncaught TypeError: Cannot read property 'dataSource' of undefined.  

                

Uncaught TypeError: Cannot read property 'dataSource' of undefined                                                                                                                   

    at ResourceBase.push../node_modules/@syncfusion/ej2-schedule/src/schedule/base/resource.js.ResourceBase.getIndexFromResourceId (resource.js:844)

    at EventBase.push../node_modules/@syncfusion/ej2-schedule/src/schedule/event-renderer/event-base.js.EventBase.getGroupIndexFromEvent (event-base.js:538)

    at EventBase.push../node_modules/@syncfusion/ej2-schedule/src/schedule/event-renderer/event-base.js.EventBase.filterBlockEvents (event-base.js:176)

    at event-base.js:1017

    at Array.forEach ()

    at EventBase.push../node_modules/@syncfusion/ej2-schedule/src/schedule/event-renderer/event-base.js.EventBase.isBlockRange (event-base.js:1006)

    at QuickPopups.push../node_modules/@syncfusion/ej2-schedule/src/schedule/popups/quick-popups.js.QuickPopups.isCellBlocked (quick-popups.js:401)

    at QuickPopups.push../node_modules/@syncfusion/ej2-schedule/src/schedule/popups/quick-popups.js.QuickPopups.cellClick (quick-popups.js:407)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)

    at Schedule.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:223)

[Balasubramanian Sattanathan]

Hi Muzaffer Birben, 

Thanks for the update. 

We have validated your reported problem “Uncaught TypeError: Cannot read property 'dataSource' of undefined” at our side and we suspect that you have faced the reported problem while adding the event dynamically to the Scheduler. So we suggest you to follow and refer the below code snippets 

add(): void { 

  let Data: Object[] = [{ 

    Id: 100, 

    Subject: 'testing', 

    StartTime: new Date(2018, 3, 1, 10, 0), 

    EndTime: new Date(2018, 3, 1, 12, 0), 

    IsAllDay: false, 

    TaskId: 1 

  }]; 

  this.scheduleObj.addEvent(Data); 

  this.addButtonObj.element.setAttribute('disabled', 'true'); 

} 

Sample: https://stackblitz.com/edit/angular-dttnyp-vompwf?file=app.component.ts 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/add-edit-and-remove-events/ 

Please check the sample and let us know if this is helpful. 

Regards, 

Balasubramanian S 

[Muzaffer Birben]

Hi,

addEvent(eventData) doesn't add it to the scheduler. I am still getting the same error.   Also, is it possible to add multiple fields to the description field? 

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

                const filteredData: Object = event.data;

                let cellData: CellClickEventArgs = this.testScheduler.Schedule.getCellDetails(event.target);

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

                    activityDescription: filteredData[0].Activity,

                    location: filteredData[0].Location,

                    startTime: cellData.startTime,

                    endTime: cellData.endTime,

                    assignedToTeacher: filteredData[0].AssignedToTeacher

                    id: filteredData[0].Id,

                };

 eventSettings: {

                dataSource: this.DataManager,

                fields: {

                    id: "id",

                    subject: { name: "activityDescription" },

                    location: { name: "location" },

                    startTime: { name: "startTime" },

                    endTime: { name: "endTime" },

                    description: { name: "assingedToTeacher" },

                    

                },

[Balasubramanian Sattanathan]

Hi Muzaffer Birben, 

 

Thanks for the update. 

 

We have validated your reported problem “addEvent(eventData) doesn't add it to the scheduler. I am still getting the same error.” at our side and modified our sample based on the shared code snippet. Since the addEvent is working properly without any errors. Kindly try the below sample. 

 

public eventSettings: EventSettingsModel = { 

  dataSource: scheduleData, 

  fields: { 

    id: "id", 

    subject: { name: "activityDescription" }, 

    location: { name: "location" }, 

    startTime: { name: "startTime" }, 

    endTime: { name: "endTime" }, 

    description: { name: "assingedToTeacher" }, 

  } 

}; 

 

add(): void { 

  let dynamicData: Object[] = [{ 

    id: 100, 

    activityDescription: 'Testing', 

    startTime: new Date(2018, 3, 1, 10, 0), 

    endTime: new Date(2018, 3, 1, 12, 0), 

    location: "Banglore", 

    assingedToTeacher: "Testing" 

  }]; 

  this.scheduleObj.addEvent(dynamicData); 

  this.addButtonObj.element.setAttribute('disabled', 'true'); 

} 

 

Sample: https://stackblitz.com/edit/angular-dttnyp-fk5nau?file=app.component.ts 

If the solution does not resolve your problem, kindly share the below details to serve you better. 

• Share a use case scenario of the  (What scheduler event you have used in your project to add the event ?)
• Replicate your problem in the above shared sample or
• Share a sample illustrating the problem which would help us to proceed further.

Regards, 

Balasubramanian S