We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Cannot drag-n-drop events in TimelineWorkWeek view (but in all other)

Hello, I'm using the latest version of all Syncfusion Angular components, in particular the Scheduler 20.3.58 and everything else is working fine. 

Drag-n-drop (move) events within the scheduler in the TimelineWorkWeek view doesn't even move the object but after release of mouse button I get an event even though the object is still in it's original place. 

I've tried to remove timeScale and interval but no change. No customized CSS.

<ejs-schedule #scheduleObj locale="sv" width='auto' height='100%' [(selectedDate)]='selectedDate' [(currentView)]="currentView" interval="2" [eventSettings]="eventSettings" [group]='group' (renderCell)="onRenderCell($event)"
(eventClick)="onEventClick($event)" (eventRendered)="eventRendered($event)" [rowAutoHeight]="true" [allowDragAndDrop]="true"
(drag)="drag($event)" (dragStart)="onDragStart($event)" (dragStop)="onDragStop($event)" (popupOpen)="onPopupOpen($event)" (cellClick)="onCellClick($event)"
(cellDoubleClick)="onCellDoubleClick($event)" [showQuickInfo]='showQuickInfo' (onCreated)="onCreated()" (hover)="onHover($event)" (onActionComplete)="onActionComplete($event)" (onActionBegin)="onActionBegin($event)" (navigating)="onNavigate($event)">


<e-views>
<e-view [displayName]="getTranslation('Day')" option="TimelineDay"></e-view>
<e-view [displayName]="getTranslation('1 week')" option="TimelineWorkWeek" timeScale="timeScaleOptions"></e-view>
<e-view [displayName]="getTranslation('2 weeks')" option='TimelineWorkWeek' [interval]="2" timeScale="timeScaleOptions"></e-view>
<e-view [displayName]="getTranslation('Month')" option="TimelineMonth"></e-view>
<e-view option="Agenda"></e-view>
</e-views>

@import "https://cdn.syncfusion.com/ej2/ej2-base/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-buttons/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-calendars/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-lists/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-angular-kanban/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-angular-schedule/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-layouts/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-angular-layouts/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-navigations/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-grids/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-treegrid/styles/bootstrap5.css";
@import "https://cdn.syncfusion.com/ej2/ej2-angular-gantt/styles/bootstrap5.css";


Any ideas on how to enable drag-n-drop in the TimelineWorkWeek


3 Replies

RM Ruksar Moosa Sait Syncfusion Team December 7, 2022 10:30 AM UTC

Hi Rolf,


We have checked on your shared codes and suspect the timeScale property for the TimelineWorkWeek was not set properly which might have caused the reported issue. Try the below sample and if the issue persists, replicate it in the sample.


Sample: https://stackblitz.com/edit/angular-jk5vs5?file=app.component.html


<e-views>

      <e-view displayName="1 week" option="TimelineWorkWeek" [timeScale]="timeScaleOptions"></e-view>
</e-views>


Regards,

Ruksar Moosa Sait



RB Rolf Bäck December 7, 2022 10:36 AM UTC

Thank you! That solved the problem. I'm a bit umberrased. The strange thing with this is that the UI changed the timescale according to the variable but was not inserted as the variable.



RM Ruksar Moosa Sait Syncfusion Team December 8, 2022 11:46 AM UTC

Rolf, you're welcome! Since the timeScale property was set wrong, the Scheduler was rendering with that value which resulted in a strange UI. Please get back to us if you need any other assistance.


Loader.
Up arrow icon