Problem with drag and drop in the scheduler

[Vladimir Milosevic]

I have a problem with drag and drop within the TimelineWorkWeek scheduler. As seen in the recording, it never drops the data where it should, but when the data is clicked, it displays the information correctly.  I am using the version "@syncfusion/ej2-angular-schedule": "^26.1.41".

https://app.birdeatsbug.com/SbGUa16quovwzGSQFkNxztHrHwAZB4or7d-UwqyUFkC-

@Component({

 selector: 'scheduler',

  standalone: true,

  imports: [

    CommonModule,

    SharedModule,

    TranslocoModule,

    ButtonModule,

    TooltipModule,

    QuizMenuComponent,

    ProgressBtnComponent,

    LoadingSpinnerComponent,

    ProgressBarComponent,

    ScheduleModule,

    TimePickerModule,

    DragDropModule,

    GridModule,

    ScheduleAllModule,

  ],

  templateUrl: './scheduler.component.html',

  styleUrls: ['./scheduler.component.scss'],

  changeDetection: ChangeDetectionStrategy.OnPush,

  encapsulation: ViewEncapsulation.None,

  providers: [

    DayService,

    WeekService,

    WorkWeekService,

    MonthService,

    AgendaService,

    TimelineViewsService,

    TimelineMonthService,

    ResizeService,

    DragAndDropService,

  ],

})

export class SchedulerComponent {

  @ViewChild('scheduleObj', { static: false }) scheduleObj!: ScheduleComponent;

  public showQuickInfo = true;

  public selectedDate: Date = new Date(2022, 11, 15);

  public currentView: View = 'TimelineWorkWeek';

  public group: GroupModel = { resources: ['Owners'] };

  public allowMultipleOwner = true;

  public timeScaleOptions: TimeScaleModel = {

    enable: true,

    interval: 60,

    slotCount: 6,

  };

  public ownerDataSource = [

    { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },

    { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },

    { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' },

  ];

} HTML

 <ejs-schedule

              #scheduleObj

              width="auto"

              height="100%"

              [(selectedDate)]="selectedDate"

              [(currentView)]="currentView"

              [group]="group"

              [rowAutoHeight]="false"

              [allowDragAndDrop]="true"

              [showQuickInfo]="showQuickInfo"

              [allowMultiCellSelection]="false"

              [allowMultiRowSelection]="false"

              [allowResizing]="true"

              [rowAutoHeight]="true"

              [enableAdaptiveUI]="false"

              [enablePersistence]="false"

              [enableRecurrenceValidation]="false"

            >

              <e-views>

                <e-view displayName="Month" option="TimelineMonth"></e-view>

              </e-views>

              <e-resources>

                <e-resource

                  field="OwnerId"

                  title="Owner"

                  name="Owners"

                  [dataSource]="ownerDataSource"

                  [allowMultiple]="true"

                  textField="OwnerText"

                  idField="Id"

                  colorField="OwnerColor"

                >

                </e-resource>

              </e-resources>

            </ejs-schedule>

[Swathi Ravi]

Hi Vladimir,

 

We have reviewed your reported issue and prepared a sample based on the snippets provided. We were unable to replicate the issue, as the drag and drop functionality is working correctly. We have shared a video and sample for your reference. Please review them, and if you are still experiencing the issue, share a sample that replicates the problem or reproduce the issue in our provided sample. This information will be very helpful in assisting you better and providing a more effective solution.

 

Sample: https://stackblitz.com/edit/angular-schedule-drag-and-drop?file=src%2Fapp.component.ts

 

 

Regards,

Swathi Ravi

Attachment: draganddrop_b9f7ff91.zip