drag and drop records from grid to schedule

Question

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 · Answer

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 · Answer

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 · Answer

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 · Answer

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 · Answer

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