Problem drag and drop scheduler / grid after version 18.2.44 in Angular 9

Question

Hi,Working situation:I am working with Angular version 9.2.4 and schedule package version 18.2.44 and grid package version 18.2.45.The grid is a separate component and is placed in the same HTML file where also the schedule is defined and placed under an ejs-splitter.properties used in the schedule:

When I drag an item from the grid onto the schedule the editor is opened and the event can be made.When saving the item is saved and shown in the schedule.Events: onDragStart, onDragStop and onActionbegin are triggered and everything are working fine.Problem:As soon as I update the packages to the latest versions (grid 18.2.55 and schedule 18.2.55), I have problems with the drag and drop.When I drop an item from the grid on the schedule the editor is shown, but when I save the event nothing happens. When I debug I see that the onActionBegin is not triggered, so the save routine is not executed. Are there changes in the new release in the handling of drag and drop, do I have to change something or is this a bug?Kind regards,Bob

Hareesh Balasubramanian · Accepted Answer

Hi Bob, 

Thanks for the update. 

We have validated your shared code snippets at our end. And for that, we have prepared a sample based on your shared Scheduler code snippets with the Scheduler as 18.2.55 version. But unfortunately we are not able to replicate the shared script error and it is working properly at our end. And the sample can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-wjskt9?file=app.component.ts 

Kindly try the above solution and if the issue still persists at your end kindly share the below details to serve you better? 
 

Replicate the issue in the above sample with issue replicating steps
Share the issue replicating sample (if possible) 
 
 
Regards, 
Hareesh

Hareesh Balasubramanian · Answer

Hi Bob, 

Greetings from Syncfusion Support..! 

We have validated your shared query “When I drop an item from the grid on the schedule the editor is shown, but when I save the event nothing happens.” at our end. And we suspect that your requirement is to drop an event from the Grid component to Scheduler. And for that, we have prepared a sample with both the Scheduler and Grid in current (18.2.55v) version using the rowDrag and rowDrop events of the Grid component and it can be viewed from the below link. 

Sample: https://stackblitz.com/edit/angular-hpply7-r7t5dj?file=app.component.ts 

Code snippet: 




  public rowDropHandler(event: any): void { 
    event.cancel = true; 
    let scheduleElement = event.target.closest('.e-content-wrap'); 
    if (scheduleElement) { 
      if (event.target.classList.contains('e-work-cells')) { 
        let cellData = this.scheduleObj.getCellDetails(event.target); 
        event.data[0].Id = this.scheduleObj.eventsData.length + 1; 
        event.data[0].StartTime = cellData.startTime; 
        event.data[0].EndTime = cellData.endTime; 
        this.scheduleObj.openEditor(event.data[0], 'Add', true); 
      } 
    } 
  } 
 
  public rowDrag(args: any): void { 
    args.cancel = true; 
  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Bob Fiering · Answer

Hello Hareesh,I see that in your sample the grid is in the same component as the scheduler. In my situation the grid is in a separate component that is embedded in the schedule component.When I started this project one of you colleagues told me that, because of this, I had to emit the dropaction to the schedule component. My rowDrop action for the grid is:html property: (rowDrop)="onDragStop($event)"ts code:onDragStop(event: any): void {  // console.log('Drop event modal: ', event);  event.cancel = true;  this.dropEventService.emit({event});}In the scheduler then when a value of the dragged row is emitted, the same  code you use in the sample is executed..This is also working right.         event.cancel = true;    let scheduleElement = event.target.closest('.e-content-wrap');    if (scheduleElement) {      if (event.target.classList.contains('e-work-cells')) {        let cellData = this.scheduleObj.getCellDetails(event.target);        event.data[0].Id = this.scheduleObj.eventsData.length + 1;        event.data[0].StartTime = cellData.startTime;        event.data[0].EndTime = cellData.endTime;        this.scheduleObj.openEditor(event.data[0], 'Add', true);      }    }The editor is opened with the right values and I can enter the information...My problem is that when I want to save the data to the database the routine I have connected to the action begin property is not triggered...html property scheduler:(actionBegin)="onActionBegin($event)"ts code: onActionBegin(args: ActionEventArgs): void {// Store the several events in an array   let newRecords: any[] = args.addedRecords;   let changedRecords: any[] = args.changedRecords;   let deletedRecords: any[] = args.deletedRecords;Until version 18.2.44 when closing/saving the appointment editor triggered the onActionBegin and passed the arrays with args.addedRecords, args.changedRecords and args.deletedRecords.When I update to the latest package this is not triggered anymore..I hope the problem I have is now more clear. If you need any additional information please let me know.Kind regards,Bob

Hareesh Balasubramanian · Answer

Hi Bob, 

Thanks for the update. 

We have validated your shared query “My problem is that when I want to save the data to the database the routine I have connected to the action begin property is not triggered.” at our end. And we suspect that your requirement is to get the event details while dropping it to the Scheduler (i.e., from the Grid component) and also while performing CRUD actions in the Scheduler. And for that, we have modified our previously updated sample using actionBegin event and in that event’s details can are properly obtained in it and the sample can be viewed from the below link. 

Sample: https://stackblitz.com/edit/angular-hpply7-r7t5dj?file=app.component.ts 

Code snippet: 




  public onActionBegin(args: any): void { 
    if (args.requestType == "eventCreate") { 
      console.log(args.addedRecords[0]); 
    } else if (args.requestType == "eventChange") { 
      console.log(args.changedRecords[0]); 
    } else if (args.requestType == "eventRemove") { 
      console.log(args.deletedRecords[0]); 
    } 
  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Bob Fiering · Answer

Hello Hareesh,Still no luck, but after updating all Syncfusion  packages to the latest version there are now errors when opening the component with the scheduler.I hope these errors make sense:core.js:6241 ERROR TypeError: Cannot read property 'valueOf' of null    at FormBase.dayCell (ej2-calendars.es2015.js:904)    at FormBase.renderDays (ej2-calendars.es2015.js:684)    at FormBase.renderDays (ej2-calendars.es2015.js:2098)    at FormBase.renderMonths (ej2-calendars.es2015.js:643)    at FormBase.renderMonths (ej2-calendars.es2015.js:2095)    at FormBase.createContentBody (ej2-calendars.es2015.js:324)    at FormBase.createContent (ej2-calendars.es2015.js:247)    at FormBase.createContent (ej2-calendars.es2015.js:2089)    at FormBase.render (ej2-calendars.es2015.js:118)    at FormBase.render (ej2-calendars.es2015.js:1975)and after that error:core.js:6241 ERROR TypeError: Cannot read property 'quickPopupHide' of undefined    at VirtualScroll.virtualScrolling (ej2-schedule.es2015.js:11533)    at Observer.notify (ej2-base.es2015.js:2133)    at ScheduleComponent.notify (ej2-base.es2015.js:6922)    at TimelineViews.onContentScroll (ej2-schedule.es2015.js:18236)    at ZoneDelegate.invokeTask (zone-evergreen.js:399)    at Object.onInvokeTask (core.js:41645)    at ZoneDelegate.invokeTask (zone-evergreen.js:398)    at Zone.runTask (zone-evergreen.js:167)    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)    at invokeTask (zone-evergreen.js:1621)In the attachment I have added the package.json, angular.json, ts-config.json and the files that holds the scheduler.If you need to have extra info please let me know.In the release notes I can see that after our current version 18.2.44, there are render bugs fixed that we are now still facing.Kind regards,BobAttachment: extra_info_6310bb03.zip

Bob Fiering · Answer

Hello Hareesh,Thank you for your response. I will try the suggested solution and will let you know the outcome of it.Kind regards,Bob

Bob Fiering · Answer

Hello Hareesh,Could the error has something to do with or settings for target and lib in the tsconfig.json file? Our setting for target is es5 and the setting for lib is es2018.What settings are in Angular 9 needed for Synfusion or which values do you advice?Kind regards,Bob

Bob Fiering · Answer

Hello Hareesh,When debugging the code we can see where the problem occurs.There is a problem when in the Syncfusion code function dayCell(localDate) is executed.The local date has a value and is ok,  but after 'let date = this.globalize.formatDate.....' the value is wrong.In our case the null value happens at the 31 October 2020 that is converted to 31 September 2020 (but 31 September is a date that does not exists), so the value returned is null and that is the error we are getting. We see that for each date after 'this.globalize.formatDate....' the local date is converted to 1 month earlier. So 27 October is converted to 27 September, 28 October is converted to 28 September and so on. Until the 31 October where the outcome is null and the code crashes.I have added pictures of our debugging as attachment.Kind regards,BobAttachment: Debuging_Images_670060c.zip

Hareesh Balasubramanian · Answer

Hi Bob, 

We have confirmed the reported issue "Cannot read property 'valueOf' of null" as a bug in our end and the fix will be available in our upcoming patch release which is expected to be rolled out on September 9, 2020. You can track the status of the bug in the below feedback link. 

Feedback link: https://www.syncfusion.com/feedback/17611        

Regards, 
Hareesh

Bob Fiering · Answer

Thank you Hareesh,Have a nice weekend.regardsBob

Vinitha Devi Murugan · Answer

Hi Bob, 
 
Thanks for the update. 
 
We will let you know once it is rolled out.  
Regards, 
M.Vinitha devi