Scheduler Drag and Drop

[Zachary Witt]

In the example for the scheduler external drag and drop, a treeview is used as the external elements.

Is this the only component that is compatible for the external drag and drop, I would really like to get it working with say a treegrid or datagrid.

[Hareesh Balasubramanian]

Hi Zachary, 

Greetings from Syncfusion Support..! 

Yes, it is possible to drag and drop the events to the Scheduler from the DataGrid/Tree Grid components also and vice-versa for the same, We have prepared a sample for your shared requirement “External drag and drop (Grid to scheduler)”using GridRowDropSetting property and RowDropped event of the Grid component and it can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/162447/ze/SupportSample-1415076606 

@using Syncfusion.Blazor.Schedule 

@using Syncfusion.Blazor.Grids 

 

<div class="row"> 

    <div class="col-lg-6"> 

        <SfGrid @ref="GridRef" DataSource="@Orders" AllowRowDragAndDrop="true" TValue="AppointmentData"> 

            <GridEditSettings AllowDeleting="true"></GridEditSettings> 

            <GridRowDropSettings TargetID="SchComponent"></GridRowDropSettings> 

            <GridEvents TValue="AppointmentData" RowDropped="OnRowDrop"></GridEvents> 

            <GridColumns> 

                <GridColumn Field=@nameof(AppointmentData.Id) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                <GridColumn Field=@nameof(AppointmentData.Subject) HeaderText="Subject" Width="135"></GridColumn> 

                <GridColumn Field=@nameof(AppointmentData.StartTime) HeaderText="Start Time" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                <GridColumn Field=@nameof(AppointmentData.EndTime) HeaderText="End Time" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

            </GridColumns> 

        </SfGrid> 

    </div> 

    <div class="col-lg-6"> 

        <div class="SchComponent"> 

            <SfSchedule AllowDragAndDrop="true" ID="Schedueler" @ref="ScheduleObj" TValue="AppointmentData" Height="550px" SelectedDate="@(new DateTime(2020, 1, 9))"> 

                <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 

            </SfSchedule> 

        </div> 

    </div> 

</div> 

<div> 

</div> 

@code{ 

    SfGrid<AppointmentData> GridRef; 

    private void OnRowDrop(RowDragEventArgs<AppointmentData> args) 

    { 

        ScheduleObj.AddEvent(args.Data[0]); 

        GridRef.DeleteRecord("Id", args.Data[0]); 

    } 

    public static SfSchedule<AppointmentData> ScheduleObj; 

 

    public static List<AppointmentData> DataSource = new List<AppointmentData> 

{ 

        new AppointmentData { Id = 11, Subject = "Meeting", StartTime = new DateTime(2020, 1, 7, 9, 30, 0) , EndTime = new DateTime(2020, 1, 7, 11, 0, 0), 

        } 

    }; 

    public class AppointmentData 

    { 

        public int Id { get; set; } 

        public string Subject { get; set; } 

        public DateTime StartTime { get; set; } 

        public DateTime EndTime { get; set; } 

        public string RecurrenceRule { get; set; } 

        public Nullable<int> RecurrenceID { get; set; } 

        public string RecurrenceException { get; set; } 

    } 

    public List<AppointmentData> Orders = new List<AppointmentData>(); 

    protected override void OnInitialized() 

    { 

        Orders = Enumerable.Range(1, 9).Select(x => new AppointmentData() 

        { 

            Id = x, 

            Subject = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], 

            StartTime = new DateTime(2020, 1, 6, 9, 30, 0), 

            EndTime = new DateTime(2020, 1, 6, 11, 30, 0), 

 

        }).ToList(); 

    } 

} 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Zachary Witt]

Thanks for the sample!  I'm looking to drop an appointment into the scheduler and set the start/end time based on the location of where I dropped it, the same functionality as the sample https://blazor.syncfusion.com/demos/scheduler/external-drag-and-drop?theme=bootstrap4, but with a grid instead of the tree view.  However, I don't see the scheduler time/data inside the RowDragEventArgs<AppointmentData> args object.  Is that possible?

[Hareesh Balasubramanian]

Hi Zachary, 

Thanks for the update. 

We have validated your shared query at our end and let you know that currently it is not feasible to achieve your requirement because we are not able to get the Top and Left positions from the RowDropped events of the Grid component. So we have consider your requirement as feature request which will be included in our upcoming March mid release. You can keep track of the status at your end through the below feedback. 

https://www.syncfusion.com/feedback/22407/add-additional-target-information-in-rowdrageventargs 

Regards, 

Hareesh